How to get Array data from Object inside in Vuejs

Question

In, my Project I'm using Vue.js and Laravel. I've a dynamic field form which is validate by Laravel end. but when I get the validation message via axios i can't separate it from the response.

Here, is my Laravel code.

      $this->validate($request,[
            'requested_by' => 'required',
            'requested_date' => 'required',
            'issued_by' => 'required',
            'supplier' => 'required',
            'data.*.product' => 'required',
            'data.*.quantity' => 'required',
            'data.*.unit' => 'required',
            'data.*.unit_price' => 'required',
        ]);

Vue code for axios request -

  axios.post('/api/requisition',{
              'data' : this.inputs,
              'requested_by': this.form.request_by,
              'requested_date': this.form.request_date,
              'issued_by': this.form.issue_by,
              'supplier': this.form.supplier,})
          .then(response => {
              console.log(response)
          })
          .catch(err => {
              this.allerrors =  err.response.data.errors
              console.log(this.allerrors)

          })

In my response I get the image like output:

How can i destruct it from this format for every dynamic form index, is there any solutions to do something.

Answer 1

I resolve my problem this way.

axios.post('/api/requisition',{
              'data' : this.inputs,
              'requested_by': this.form.request_by,
              'requested_date': this.form.request_date,
              'issued_by': this.form.issue_by,
              'supplier': this.form.supplier,})
          .then(response => {
              console.log(response)
          })
          .catch(err => {
              this.allerrors =  err.response.data.errors
              console.log(this.allerrors["data.[0].product"])
          })

In dynamic form view handle this way -

 <div :class="['form-group',allerrors['data.'+key+'.product'] ? 'has-error error' : '']">
       <label for="">Product<i class="text text-danger">*</i></label>
         <select class="form-control" v-model="input.product" @change="getData($event,k)">
            <option value="" disabled selected>-Select Product-</option>

       </select>

     </div>

 <span v-if="allerrors['data.'+key+'.product']" :class="['text text-danger']">{{allerrors["data."+key+".product"]}}</span>  

 </div>

Answer 2

I really like the lodash answer to be honest. But since this was fun to do. Here is an example without lodash.

const res = {
  "data.0.name": "Bob",
  "data.0.gender": "Male",
  "data.0.age": 27,
  "data.1.name": "Kelly",
  "data.1.gender": "Female",
  "data.1.age": 24,
  "issuedBy: "Morty",
  "requestedBy": "Rick"
};

const output = [];

Object.keys(res)
  .filter(key => /data/.test(key))
  .forEach(key => {
    const [index, prop] = key.replace('data.', '').split('.');
    if (!output[index]) {
      output[index] = {};
    }
    output[index][prop] = res[key]
  });

console.log(output);

Answer 3

That's kind of gross but you can reflect on the object to get the keys and restructure it however you like, there are more than one way to do it but something like:

import _ from "lodash"

function transformData(data) {
  return Object.entries(data).reduce((obj, [k,v]) => _.set(obj, k, v), {})
}