json - 如何从两个嵌套的 json 数组中提取 Vue 中的数据？

问题描述

这个 json 数组中有两个订单。我需要从一个内部数组（product_id）和另一个（名称）产品名称中提取数量和价格，我不知道数据透视数组，并且它不完整

我试试这个：

<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>

但我以错误的顺序获取数据：

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

这是我原来的 json 数组：

  [
   {
      "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
            }
         }
      ]
   },

理想情况下，情况会如此，但订单中的产品数量可能会有所不同：

<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>

告诉我如何在Vue中正确提取此类数据？

标签： jsonvue.js

解决方案

一般来说，您想要的表格不是那么语义化（无论如何这不是 Q 的问题）。

迭代抛出对象

这个问题一般与迭代 throw 对象有关（不特定于vue）。 https://vuejs.org/v2/guide/list.html

这里的想法是使用dot notation嵌套循环（谷歌“访问 JSON 数据”来获取想法/概念 - 一个示例：访问 JSON 数据）。

console.log她用来“学习”你的数据结构非常有用：

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

如果 console.log 呈现undefined- 您在访问对象时出错。

循环 - 获取支点：

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

嵌套循环

获取价格

  <!-- 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>

再次采用这些想法并创建一个更具可读性和有效性的表格。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

我的建议 - 首先简单地勾勒表格HTML- 然后将这些想法转移到 Vue。

片段示例（非语义表）：

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>