V-for inside v-for in Vue.js

Question

I'm trying to get object items from inside a parent object using a v-for inside another v-for in Vue.js.

Data structure:

flights: [
  {
    "airline": "BA",
    "airport": "EBJ",
    "status": {
      "_code": "A",
      "_time": "2018-03-02T14:19:00Z"
    }
  },
  etc....
]

<div v-for="flight in flights">
  <p>{{flight.airline}}</p>
  <p>{{flight.airport}}</p>

  <div v-for="st in flight.status">
    <p>{{st._code}}</p> // should return 'A'
    <p>{{st._time}}</p> // should return '2018-03-02T14:19:00Z'
  </div>
</div>

However, neither st._code or st._time return anything. st returns both values ("A" and "2018-03-02T14:19:00Z").

Any idea on how to return the single values inside the status object?

Are you sure that all your objects have status._code or status._time in them? — samayo
– samayo, Commented Mar 5, 2018 at 13:51
Well, status is a flat object as far as I can see. Can't you just use flight.status._code and so on? — Artamiel
– Artamiel, Commented Mar 5, 2018 at 13:52
I noticed that one entry not had status._time. Will try to wrap the whole thing inside a conditional. — Filip Blaauw
– Filip Blaauw, Commented Mar 5, 2018 at 14:05

Daniel Beck · Accepted Answer · 2018-03-05 14:18:54Z

1

It is possible to use v-for on an object, as you're trying to do with status, but the syntax is slightly different; in cases where iterating over an object is useful you'll generally want to include the key as well as the value:

<div v-for="(val, key) in flight.status">
  <p>{{key}}: {{val}}</p>
</div>

would output

<p>_code: A</p>
<p>_time: 2018-03-02T14:19:00Z</p>

In your case you already know the specific keys you want, so it would be easier to not use v-for and instead just use e.g {{flight.status._code}}.

Unless there can be more than one "status" per flight, there's no good reason to wrap status in an array. This will work with your existing data structure:

<div v-for="flight in flights">
  <p>{{flight.airline}}</p>
  <p>{{flight.airport}}</p>
  <p>{{flight.status._code}}</p> 
  <p>{{flight.status._time}}</p> 
</div>

edited Mar 5, 2018 at 14:18

answered Mar 5, 2018 at 14:06

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

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

1 Comment

Bhojendra Rauniyar Over a year ago

This should be the accepted answer. +1 here's the fiddle: jsfiddle.net/943bx5px/88

samayo · Accepted Answer · 2018-03-05 14:07:41Z

0

The reason you are not seeing the expected output is because, of this line:

<div v-for="st in flight.status">

That means you are expecting vue to iterated throught this:

"status": {
  "_code": "A",
  "_time": "2018-03-02T14:19:00Z"
}

and the above is an object, not an array ... so unless status is an array, it won't work.

If you expect your code to work, try changing your array to this:

  flights: [
    {
      "airline": "BA",
      "airport": "EBJ",
      status: [{
        "_code": "A",
        "_time" : "2018-03-02T14:19:00Z"
      }]
    }
  ]

working demo:

https://jsfiddle.net/943bx5px/82/

edited Mar 5, 2018 at 14:07

answered Mar 5, 2018 at 14:02

samayo

16.5k13 gold badges95 silver badges115 bronze badges

2 Comments

Filip Blaauw Over a year ago

Ok, I will transform the data on import to have it as an array. Thanks

samayo Over a year ago

@FilipBlaauw Make sure to upvote/accept answer that solve your problem

Collectives™ on Stack Overflow

V-for inside v-for in Vue.js

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related