Vue js get value from array

Question

Have below code with flights info. Table shows price and flightDuration, but I fail to get airline name from flights array. I am new to Vue js, so would appreciate any help.

UPDATED (still not working):

 <tr v-for="flight in tickets.flights">
 <td>{{ flight.airline.name }}</td>
 </tr>
 JSON Data structure:
 data: {
 tickets: [{
 "price": 100,
 "flightDuration": "75",
 "flights": [
 {
 "departureTime": "12:00",
 "departureDate": "21 november",
 "arrivalTime": "13:15",
 "arrivalDate": "21 november",
 "airline": {
 "code": "DV",
 "name": "Scat"
 }
 }
 ]
 sortKey : 'flights.departureDate',
 reverse : false,
 columns : [
 'flights.departureDate',
 'flightDuration'
 ]

https://jsfiddle.net/n7zjpgu5/

• D Malan: What airline name would you want to display if there are multiple flights?

Answer 1

Below is the correct one and working.

<tr v-for="ticket in tickets">
<td v-for="flight in ticket.flights">
 {{ flight.airline.name }}
</td>
</tr>

Codepen : https://codepen.io/anon/pen/mozPRW

<tr v-for="ticket in tickets">
 <td v-for="flight in ticket.flights">{{ flight.departureDate }}</td>
 <td v-for="flight in ticket.flights">{{ ticket.flightDuration }}</td>
 <td v-for="flight in ticket.flights">{{ flight.airline.name }}</td>
</tr>

Forked your Fiddle and code updated : https://jsfiddle.net/u2skLrz0/

• Yelena TsK: Great great THANK to YOU! Really appreciate!

Answer 2

Your problem is that flights is an array. That means there can be more than one airline. You will have to loop again over the flights.

v-for="flight in product.flights"

If you are sure that there will always be only one flight you can get your name by

{{ product.flights[0].airline.name }}

Answer 3

You can access values from array like this:

<td>{{ product.flights[0].airline.name }}</td>

But if there are more elements in array only the first one will be shown. For that case you can iterate through array like this:

<tr v-for="product in list">
 <td>{{ product.price }}</td>
 <td>
 <span v-for="flight in product.flights">{{ flight.airline.name }}</span>
 </td>
</tr>

Answer 4

The example will work for you.

<tr v-for = "flight in data.flights">
 <td>{{flight.airline.name}}</td>
</tr>