Multiple v-for to get values from Nested JSON array in Vue.js

Question

I am fetching data from external API and populating Table to display the JSON Data. The JSON data has multiple nested arrays, actually the data is for "Orders". So I am trying to get the Items of the order in a cell, for that I am using "v-if" but i could not archive this. The results I am getting for the below code is each item of the order in separate column, but i am trying to view the items in one cell and other 'meta_data'

Below is JSON data structure

"line_items": [{
    "name": "Salat",
    "meta_data": [{
        "id": 11500,
        "key": "size",
        "value": "full"
      },
      {
        "id": 1150001,
        "key": "Dressing",
        "value": "green"
      }
    ],
    "price": 4.28571399999999957941554384888149797916412353515625
  },
  {
    "name": "Chicken",
    "meta_data": [{
        "id": 115111112,
        "key": "size",
        "value": "Normal (7,00 &#8364;)"
      },
      {
        "id": 1151111113,
        "key": "Extra sauce",
        "value": "Bbq(0,50 &#8364;)"
      }
    ],
    "price": 7.14285700000000023379698177450336515903472900390625
  },
]

This is how I am creating the table

<table class="table table-bordered" id="table">
  <thead>
    <tr>
      <th scope="col">Order Id</th>
      <th scope="col">Name</th>
      <th scope="col">Items</th>
    </tr>
  </thead>
  <tbody>
    <tr 
      v-for="(order, index) in orders"
      :key="order.id"
      :class="{highlight: !order.is_printed}"
    >
      <td>{{ order.id }}</td>
      <td>{{ order.billing.first_name + " " +order.billing.last_name }}</td>
      <!-- <td>{{ order.line_items[].name}} </td>-->
      <td v-for="(items, index) in order.line_items">{{items.name}}</td>
    </tr>
  </tbody>
</table>

How can i archive this to get the names and meta data of the items of the order in one cell.

Suggestions will be great help.

Thank you

76484 · Accepted Answer · 2020-10-02 01:55:49Z

1

By having the v-for on the <td> element in the template it means you will have a <td> created for each item in your order.line_items array. To have all of these items render within a single <td> cell, you need to put the v-for inside the <td>. An unordered list (<ul>) may be an appropriate HTML element to use. For example:

<td>
    <ul>
        <li v-for="(items, index) in order.line_items">{{items.name}}</li>
    </ul>
</td>

I have created a fiddle for your reference.

answered Oct 2, 2020 at 1:55

76484

9,0013 gold badges23 silver badges33 bronze badges

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

8 Comments

Tom Over a year ago

Yeah, it worked. Thanks for the answer. One question, can i use this same to get the "key and value" for each item from "meta_data" array. I am not getting it when using "order.line_items.meta_data".

76484 Over a year ago

@Tom: As meta_data is an Array, you would need to access each element within that array by its index, (ex., order.line_items[0].meta_data[0]). Alternatively, you could nest another v-for within your line_items v-for. See this forked fiddle: jsfiddle.net/76484/xLpzomkb

Tom Over a year ago

Thanks for it, i figured out. I am trying to access each element as you said for particular category product has three different eExtras, for that product I need not pich the index[1] in that array, need only [2] and [3], I am using this code

<li v-for="meta in items.meta_data" v-if = "meta.meta_data[2]">{{meta[1].value + meta[2].value}}</li>                            <li v-else >{{meta.value}}</li>

, sorry to continue with this. I hope it will be easy one for your point the error. Thank you

76484 Over a year ago

@Tom: It's not quite clear to me what you are trying to do achieve. Perhaps it would be best to post a new question with more detail.

Tom Over a year ago

For example, pizza has 3 meta_data, other things may have 1 or 2 meta_data. For pizza , i do not want to display meta_data[0], only need meta_data[1] and meta_data[2]. This is what i am trying

|

Collectives™ on Stack Overflow

Multiple v-for to get values from Nested JSON array in Vue.js

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related