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.

this.inputs what contains?

Eduardo Hernandez
– Eduardo Hernandez

2019-12-11 16:14:22 +00:00
Commented Dec 11, 2019 at 16:14 — Eduardo Hernandez
– Eduardo Hernandez, Commented Dec 11, 2019 at 16:14
this.inputs contains all dynamics fields in the form.

Gabrielle-M
– Gabrielle-M

2019-12-11 16:53:35 +00:00
Commented Dec 11, 2019 at 16:53 — Gabrielle-M
– Gabrielle-M, Commented Dec 11, 2019 at 16:53

jemiloii · Accepted Answer · 2019-12-11 16:22:08Z

1

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);

answered Dec 11, 2019 at 16:22

jemiloii

25.9k9 gold badges58 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gabrielle-M · Accepted Answer · 2019-12-11 18:45:42Z

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>

justin.m.chase · Accepted Answer · 2019-12-11 16:12:41Z

0

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), {})
}

answered Dec 11, 2019 at 16:12

justin.m.chase

13.7k9 gold badges61 silver badges111 bronze badges

Collectives™ on Stack Overflow

How to get Array data from Object inside in Vuejs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related