How do I extract data in Vue from two nested json arrays?

Question

There are two orders in this json array. I need to pull the quantity and price from one internal array (product_id) and from another (name) product name the pivot array is unknown to me, and it is not complete

I try this:

<template v-for="order in orders">
 <tr>
   <td>{{ order.order_id }}</td>
   <td>
  <span v-for="product_id in order.product_id">
   <span v-for="name in order.name">
      {{ name.name }} -
   </span>
      {{ product_id.quantity }}pc.
Price: {{ product_id.price }}
  </span>
   </td>
 </tr>
</template>

but I get the data in the wrong order:

Product_8 - Product_21 - Product_30-1 pc. Price: 141
Product_8 - Product_21 - Product_30-2 pc. Price: 509
Product_8 - Product_21 - Product_30-1 pc. Price: 399

Product_1 - Product_11 - Product_20-3 pc. Price: 320
Product_1 - Product_11 - Product_20-2 pc. Price: 953
Product_1 - Product_11 - Product_20-1 pc. Price: 911

This is my original json array:

  [
   {
      "order_id":1,
      "status":20,
      "partner_name":"McLaughlin",
      "product_id":[
         {
            "id":1,
            "order_id":1,
            "product_id":8,
            "quantity":1,
            "price":141
         },
         {
            "id":2,
            "order_id":1,
            "product_id":30,
            "quantity":2,
            "price":509
         },
         {
            "id":3,
            "order_id":1,
            "product_id":21,
            "quantity":1,
            "price":399
         }
      ],
      "name":[
         {
            "id":8,
            "name":"Product_8",
            "price":141,
            "pivot":{
               "order_id":1,
               "product_id":8
            }
         },
         {
            "id":21,
            "name":"Product_21",
            "price":399,
            "pivot":{
               "order_id":1,
               "product_id":21
            }
         },
         {
            "id":30,
            "name":"Product_30",
            "price":509,
            "pivot":{
               "order_id":1,
               "product_id":30
            }
         }
      ]
   },
   {
      "order_id":2,
      "status":10,
      "partner_name":"Grimes",
      "product_id":[
         {
            "id":4,
            "order_id":2,
            "product_id":1,
            "quantity":3,
            "price":320
         },
         {
            "id":5,
            "order_id":2,
            "product_id":11,
            "quantity":2,
            "price":953
         },
         {
            "id":6,
            "order_id":2,
            "product_id":20,
            "quantity":1,
            "price":911
         }
      ],
      "name":[
         {
            "id":1,
            "name":"Product_1",
            "price":320,
            "pivot":{
               "order_id":2,
               "product_id":1
            }
         },
         {
            "id":11,
            "name":"Product_11",
            "price":953,
            "pivot":{
               "order_id":2,
               "product_id":11
            }
         },
         {
            "id":20,
            "name":"Product_20",
            "price":911,
            "pivot":{
               "order_id":2,
               "product_id":20
            }
         }
      ]
   },

Ideally, this would be the case, but the number of products in the order may vary:

<td>{{ order.name[0].name }} </br>
{{ order.product_id[0].quantity }}pc. </br>
Price: {{ order.product_id[0].price }}</td>

<td>{{ order.name[1].name }} </br>
{{ order.product_id[1].quantity }}pc. </br>
Price: {{ order.product_id[1].price }}</td>

<td>{{ order.name[2].name }} </br>
{{ order.product_id[2].quantity }}pc. </br>
Price: {{ order.product_id[2].price }}</td>

Tell me how to correctly extract such data in Vue?

Answer 1

In general, the table you want is not so semantic (Anyway this is not the issue of the Q).

iterating throw objects

This issue related to iterating throw objects in general (Not specific to vue). https://v2.vuejs.org/v2/guide/list.html

The idea here is to use dot notation and nested loop (google "Accessing JSON Data" to get the idea/concepts - one example: Accessing JSON data).

Very useful her to use console.log to "learn" your data structure:

console.log(orders[0].name[0].pivot.name); /* return pivot name for order 1 */

If console.log render undefined - You have an error accessing the object.

Loop - get the pivot:

<template v-for="order in orders">
   <p>{{order.name[0].pivot.name}}</p>
</template>

Nested loop

Get price

  <!-- outer loop throw orders -->
  <template v-for="order in orders">
    <!-- inner loop throw product_id-->
    <tr v-for="(item, index) in order.product_id">
      <td>
        <b>price:</b> {{ item.price }}$
      </td>
    </tr>
  </template>

Again take these ideas and create a more readable & valid table. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

My advice - First outline the table by plain HTML - then move these ideas to Vue.

Snippet example (Not semantic table):

var orders = [
  {
    "order_id":"order_id_1",
    "status":20,
    "partner_name":"McLaughlin",
    "name":[
      {
        "id":8,
        "name":"Order name one",
        "price":141,
        "pivot":{
          "order_id":1,
          "product_id":8
        }
      }
    ],
    "product_id":[
      {
        "name": "nike shoes",
        "id":1,
        "quantity":1,
        "price":141
      },
      {
        "name": "adidas shoes",
        "id":2,
        "quantity":2,
        "price":509
      }
    ]
  },
  {
    "order_id": "order_id_2",
    "status":10,
    "partner_name":"Grimes",
    "name":[
      {
        "id":8,
        "name":"Order name two",
        "price":141,
        "pivot":{
          "order_id":1,
          "product_id":8
        }
      }
    ],
    "product_id":[
      {
        "name": "puma shoes",
        "id":4,
        "quantity":3,
        "price":320
      },
      {
        "name": "asics shoes",
        "id":5,
        "quantity":2,
        "price":953
      },
      {
        "name": "NB shoes",
        "id":6,
        "quantity":1,
        "price":911
      }
    ],
  }
]

var example1 = new Vue({
  el: '#example-1',
  parentMessage: 'Parent',
  data: {
    orders: orders
  }
})

<link href="https://unpkg.com/purecss@1.0.1/build/pure-min.css" rel="stylesheet"/>

  <table id="example-1"  style="width: 100%;" class="pure-table  pure-table-bordered pure-table-striped">
    <!-- outer loop -->
    <template v-for="order in orders">
      <tr>
        <th style="background: red; color: white;">{{order.name[0].name}}</th>
      </tr>
      <!-- inner loop -->
      <tr v-for="(item, index) in order.product_id">
        <td>
          <p><b>Product:</b> {{ item.name }}</p>
          <p><b>item price:</b> {{ item.price }}$</p>
          <p><b>quantity:</b> {{ item.quantity }}</p>
          <p><b>sum:</b><v-model style="color: green;" v-model.number="price = item.quantity * item.price">{{price}}$</v-model>
          <p>{{order.name[0].pivot.name}}</p>
        </td>
      </tr>
      <br>
    </template>
  </table>





<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>