How to loop through an array of objects and nested object in vue 2

Question

I have an array that contains lots of objects and nested objects. I want to loop through the array using v-for in vue 2 app.

Here is what I get if I print the complete array

[
[
{
  "id": 1,
  "title": "Dolor assumenda officiis.",
  "joke": "Esse quia non voluptas facere odio id. Aut animi vero qui corporis alias. Sunt omnis qui sunt est officia.",
  "created_at": "Jun 22, 2017",
  "creator": {
    "data": {
      "id": 1,
      "name": "Dr. Sage Braun I",
      "email": "[email protected]",
      "joined": "Jun 22, 2017"
    }
  }
},
{
  "id": 2,
  "title": "Quod occaecati doloribus amet voluptatem.",
  "joke": "Voluptas nam harum voluptatem ipsam tempora rerum. Sunt quis nam debitis. Voluptatibus id dolor quia aut odio. Omnis saepe harum quibusdam in dolorem. Possimus voluptatem impedit sed inventore fugit omnis culpa.",
  "created_at": "Jun 22, 2017",
  "creator": {
    "data": {
      "id": 1,
      "name": "Dr. Sage Braun I",
      "email": "[email protected]",
      "joined": "Jun 22, 2017"
    }
  }
}
]
]

This is how I am trying to get the data but it does not load anything

<div class="row" v-for="u in users" >
     {{ u.id}}
 </div>

you want to loop through the properties or the items in the array? — kevguy
– kevguy, Commented Jun 30, 2017 at 3:26

frozen · Accepted Answer · 2017-06-30 03:36:50Z

1

You seem to have a nested array. Try

<div class="row" v-for="u in users[0]" >
     {{ u.id}}
 </div>

answered Jun 30, 2017 at 3:36

frozen

2,16817 silver badges33 bronze badges

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

1 Comment

Hkm Sadek Over a year ago

yeah it worked I tried the same ways but I got en error before but now the same code working :) I can get the first objects using u.id and to get the id from creator object I need to use u.creator.data.id Thank you for the time.

Collectives™ on Stack Overflow

How to loop through an array of objects and nested object in vue 2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related