CODEWITHSUNDEEP
javascriptjqueryvue.jsvue-componentvue-router
Wanderer
Wanderer

Reputation: 705

How can I provide edit feature in html vue js stored in an array?

This is my json response

{"status":true,"data":[{"_id":"5afd20c8aae8bd215cc3c33e","no":131,"Date":"2000-01-01T00:00:00.000Z","__v":0,"rules":[{"name":"Act,1972","section":"12","_id":"5afd20c8aae8bd215cc3c341","data":[{"head":"no","value":"","_id":"5afd20c8aae8bd215cc3c342"}]},{"name":"Act,1961","section":"42,12","_id":"5afd20c8aae8bd215cc3c33f","data":[{"head":"1","value":"12","_id":"5afd20c8aae8bd215cc3c340"}]}]}]}]}

This is the response of the data I am getting for implementing the edit functionality.

I am adding the data in the format shown below:

    <div class="card-content" v-for="(bok, index) in rules" :key="index">
      <div class="row">
      <div class="col-md-6">
      <div class="form-group label-floating">
     <label class="control-label">Booked Under Act/Rule</label>
    <select class="form-control" v-model="bok.name">
     <option value="Act,1972">Act,1972</option>
     <option value="Rule,2012">Rule,2012</option>  
     <option value=" Act,1961">1961</option>  
    </select>
   </div>
   </div>
    <div class="col-md-6">
    <div class="form-group label-floating">
    <label class="control-label">Sec</label>
    <input type="text" class="form-control" v-model="bok.section" >
           </div>
            </div>
            </div>
             <div class="row" v-if="bok.name == 'Act,1972'">
              <div class="col-md-4">
               <div class="form-group label-floating">
            <label class="control-label">Ar(if any)</label>
          <input type="text" class="form-control" v-model="bok.data[0].head" required="">
               </div>
               </div>
               </div>
               <div class="row" v-if="bok.name == 'Act,1961'">
                <div class="col-md-4">
               <div class="form-group label-floating">
              <label class="control-label">Select</label>
            <select class=" form-control" v-model="bok.data[0].head">
          <option value="1">Wild</option>
          <option value="2">croach</option>
         <option value="3">Ill</option>  
        <option value="4">pass</option>
        </select>
         </div>
            </div>
              </div>
            </div> 
        <div class="row" v-if="bok.data[0].head == 1">
          <div class="col-md-4">
            <div class="form-group label-floating">
            <label class="control-label">Area </label>
         <input type="text" class="form-control" required="" v-model="bok.data[0].value">
            </div>
              </div>
              <div class="col-md-4">
         <div class="form-group label-floating">
       <label class="control-label">icted</label>
      <input type="text" class="form-control" required="">
      </div>
        </div>
        </div>
        <div class="row" v-if="bok.data[0].head == 4">
         <div class="col-md-4">
         <div class="form-group label-floating">
         <label class="control-label">No.</label>
         <input type="text" class="form-control" required="" v-model="bok.data[0].value">
              </div>
            </div>
           </div>
           </div>   
        <a @click="addNewRules">Add Another Rule</a>

I am sending this data as

addForm = new Vue({
el: "#addForm",
  data: {
    no:'',
    Date: '',
    rules : [{
        name:null,
        section:null,
        data   : [{head:null,value:null}]
    }],  

  },
  methods: {
        addNewRules: function() {
          this.rules.push({ name: null, section: null,data:[{head:null,value:null}] });
        },
},
}

So, how can I able to implement edit feature to the rules[]. How can I able to map the same. Also after edit I need to update the values in the format

 rules : [{
            name:null,
            section:null,
            data   : [{head:null,value:null}]
        }],

So, during edit how can I able to call rules[] from the json data. Please help me to have a answer for the same. I am really confused how to have an answer for the problem.

As the html given, I need to provide an html containing select for all the options i got the json response

Upvotes: 0

Views: 57

Answers (1)

Sally CJ
Sally CJ

Reputation: 15620

If you just want to read the data from the JSON response, or add the data to the Vue app/form, then:

You could add this code somewhere in the page, after you've initialized the addForm Vue app:

// This could be just *part* of the full JSON response/data, but this is the expected
// format of the data that you assign to `json_res`.
const json_res = {"status":true,"data":[{"_id":"5afd20c8aae8bd215cc3c33e","no":131,"Date":"2000-01-01T00:00:00.000Z","__v":0,"rules":[{"name":"Act,1972","section":"12","_id":"5afd20c8aae8bd215cc3c341","data":[{"head":"no","value":"","_id":"5afd20c8aae8bd215cc3c342"}]},{"name":"Act,1961","section":"42,12","_id":"5afd20c8aae8bd215cc3c33f","data":[{"head":"1","value":"12","_id":"5afd20c8aae8bd215cc3c340"}]}]}]};

(function() {
  var d = json_res.data[0] || {};

  addForm.no = d.no;
  addForm.Date = d.Date;

  d.rules.forEach(function(r) {
    addForm.rules.push({
      name: r.name,
      section: r.section,
      data: [{
        head: r.data[0].head,
        value: r.data[0].value
      }]
    });
  });
})();

Demo

UPDATE

Or a simpler way, but could get tricky, is:

// This would be defined before initializing `addForm`.
const json_res = {"status":true,"data":[{"_id":"5afd20c8aae8bd215cc3c33e","no":131,"Date":"2000-01-01T00:00:00.000Z","__v":0,"rules":[{"name":"Act,1972","section":"12","_id":"5afd20c8aae8bd215cc3c341","data":[{"head":"no","value":"","_id":"5afd20c8aae8bd215cc3c342"}]},{"name":"Act,1961","section":"42,12","_id":"5afd20c8aae8bd215cc3c33f","data":[{"head":"1","value":"12","_id":"5afd20c8aae8bd215cc3c340"}]}]}]};

addForm = new Vue({
  el: "#addForm",
  data: function() {
    // This would include `_id`, etc.
    return json_res.data[0];
  },
  methods: {
    ...
  }
});

Upvotes: 1

Related Questions