How to Iterate Data in vue.js

Question

I am trying to iterate this data on vue inside the method function

{
  "data": [
    {
      "id": 1,
      "name": "Jack Daniels",
      "mobile": "21223",
      "start": "2021-02-25T09:16:21.000000Z",
      "end": "2021-02-25T09:16:21.000000Z"
    }
  ]
}

here is my code

async getEvents() {
    try {
        const response = await axios.get('/api/customers')

        Object.entries(response).forEach(([key, value]) => {
            console.log(`${key}:${value}`)
        })

    } catch (err) {
        console.log(err)
    }
}

and here is the output on

data:[object Object],[object Object]

any idea what went wrong and if there is better approach for iterating the data in vue.js

data contains an array containing one object. You have to access the array index 0 and then you get the object — ccarstens
– ccarstens, Commented Mar 1, 2021 at 7:54
You might also want to log out the actual entries rather than their string representations, console.log('key',key); console.log('value',value); — kevmc
– kevmc, Commented Mar 1, 2021 at 8:01
@ccarstens not sure on the terms but I think its called method handler forgive my ignorance — Edson
– Edson, Commented Mar 1, 2021 at 9:07

Asimple · Accepted Answer · 2021-03-01 07:58:56Z

1

First of all it's not Vue question(axios/js tags).
You don't need Object.entries here (if you need to iterate data array).
Just use map for array and that's all.

const iteratedData = response.data.map((item, index) => {
    console.log(`Index ${index}`);
    console.log(item);
    // Do what you need with data, your iteration
    return item;
});

answered Mar 1, 2021 at 7:58

Asimple

6503 silver badges8 bronze badges

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

4 Comments

Edson Over a year ago

Hi, thanks for your replay and for your correction, I tried the code but am getting this error TypeError: response.data.map is not a function

Asimple Over a year ago

@EdsonTeliaken Can you just log it to console? To see actual structure

Edson Over a year ago

@ Asimple am getting this one

TypeError: response.data.map is not a function     at _callee$ (app.js:2526)     at tryCatch (app.js:38812)     at Generator.invoke [as _invoke] (app.js:39042)     at Generator.next (app.js:38867)     at asyncGeneratorStep (app.js:2283)     at _next (app.js:2285)

Asimple Over a year ago

@EdsonTeliaken I've understood problem with it. Just console.log(response) to see actual object and find out through which property you should iterate. Because there can be response data, and data of data, so maybe you should access it like: response.data.data.map

anand shukla · Accepted Answer · 2021-03-01 07:59:49Z

1

Code is fine. Here key is data and value is array of object. so to access value, here is a sample code

let response = {
 "data":[{
 "id":1,
 "name":"Jack Daniels",
 "mobile":"21223",
 "start":"2021-02-25T09:16:21.000000Z",
 "end":"2021-02-25T09:16:21.000000Z"
 }]
};
Object.entries(response).forEach(([key,value])=>{
          console.log(`${key}:${value[0].id}`)
})

Here value is an array so iterate value to get properties. It is just a sample to show logic.

answered Mar 1, 2021 at 7:59

anand shukla

7167 silver badges14 bronze badges

2 Comments

Edson Over a year ago

Hey man thanks for your replay suppose I have more than one data do iterate how can I achieve this? thanks

anand shukla Over a year ago

You can use foreach to iterate over array of object

Collectives™ on Stack Overflow

How to Iterate Data in vue.js

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related