Javascript 在vue中显示嵌套数组

我是vue的新手，我能解决这个问题

我收到一些JSON，如下所示：

[
  {
    "name": "jack",
    "age": "twenty",
    "Colors": {
      "favorite": "blue",
      "hate": "orange",
      "surprise": "violet"
    },
   
    "Food": {
     "favorite": "barbecue",
      "hate": "broccoli",
      "surprise": "pasta"
      "new": [
        "pizza",
        "ice cream"
      ]
    }
  }
]

我正试图得到这个：

姓名：杰克

年龄二十岁

颜色

• 最喜欢的：蓝色
• 仇恨：橙色
• 惊喜：紫罗兰色

食物

• 最喜欢的：烧烤
• 仇恨：花椰菜
• 惊喜：意大利面
• 新增：
  • 披萨
  • 冰激凌

HTML

但我明白了：

姓名：杰克

0：J

1：a

2：c

3：k

年龄二十岁

0：T

1：w

2：e

3：n

1：t

2：y

颜色：{“最喜欢的”：“蓝色”、“讨厌的”：“橙色”、“惊喜的”：“紫色”}

• 最喜欢的：蓝色
• 仇恨：橙色
• 惊喜：紫罗兰色

食物{“最喜欢的”：“烧烤”、“讨厌的”：“西兰花”、“惊喜”：“意大利面”、“新的”：[“比萨饼”、“冰淇淋”]}

• 最喜欢的：烧烤
• 仇恨：花椰菜
• 惊喜：意大利面
• 新的：[“比萨饼”、“冰淇淋”]

HTML

名称：杰克

0J

1a

2c

3k

年龄：20岁

0T

1w

2e

3n

1t

2y

颜色{“最喜欢的”：“蓝色”、“讨厌的”：“橙色”、“惊喜的”：“紫色”}



最爱：蓝色

仇恨：橙色

惊喜：紫罗兰



食物{“最喜欢的”：“烧烤”、“讨厌的”：“西兰花”、“惊喜”：“意大利面”、“新的”：[“比萨饼”、“冰淇淋”]}



最爱：烧烤

憎恨：花椰菜

惊喜：意大利面

新：[“比萨饼”、“冰淇淋”]

---

我想我需要像isArray（）这样的东西，在第一个v-for之前加上一些v-if。但是我到不了那里。我也尝试过长度，但没有。

我根据您在JSFIDLE上的示例做了一个粗略的版本：

因此，基本上您需要循环遍历这些项，并检查值是数组还是对象，然后您必须再次循环遍历它们，如下所示：

<div id="app">
  <div v-for="(item, index) in Object.entries(items[0])" :key="index">
    <div v-if="typeof item[1] !='object'">
      <p>
        <strong>{{item[0]}}:</strong> {{item[1]}}
      </p>
    </div>
    <div v-else>
      <p>
        <strong>{{item[0]}}:</strong>
        <ul>
          <li v-for="(innerItem, innerIndex) in  Object.entries(item[1]) ">
            <div v-if="!Array.isArray(innerItem[1])">
              <p>


                <strong>{{innerItem[0]}}:</strong>
                <span>{{innerItem[1]}}</span>
              </p>


            </div>
            <div v-else>
              <strong>{{innerItem[0]}}:</strong>

              <ul>
                <li v-for="(it2,in2) in innerItem[1]">{{it2}}</li>
              </ul>
            </div>
          </li>
        </ul>
      </p>
    </div>
  </div>


</div>

{{item[0]}:{{{item[1]}


{{item[0]}}:



{{innerItem[0]}}:
{{innerItem[1]}

{{innerItem[0]}}:

{{it2}

您需要直接访问模板中的

item.name

、

item.category

等。如果您不知道密钥名称，则需要使用例如

Object.keys

来获取要迭代的密钥。是否要递归地遍历每个元素？然后，您需要检查该值是对象、数组还是基本值/字符串。

  <div v-for="(item, index) in items" :key="index">
       <div>
          <p><strong>{{title}}</strong> {{item}}</p>
          <p v-for="(category, index) in item" :key="index"><strong>{{index}}</strong> {{category}}</p>
       </div>
    </div>

import axios from 'axios'
    export default {
        name: 'theComponent',
        props: {},
        data() {
            return {
                items: []
            }
        },
        mounted() {
            const url = 'https://api-json-url'
            axios.get(url)
                .then(response => {
                    this.items= response.data[0]
                })
        }
    };

    <p><strong>Name:</strong> Jack</p>
    <p><strong>0</strong>J</p>
    <p><strong>1</strong>a</p>
    <p><strong>2</strong>c</p>
    <p><strong>3</strong>k</p>
    <p><strong>Age:</strong> Twenty</p>
    <p><strong>0</strong>T</p>
    <p><strong>1</strong>w</p>
    <p><strong>2</strong>e</p>
    <p><strong>3</strong>n</p>
    <p><strong>1</strong>t</p>
    <p><strong>2</strong>y</p>
    <p><strong>Colors</strong> {"favorite": "blue","hate": "orange","surprise": "violet"}</p>
    <p>
       <ul>
          <li><strong>Favorite:<strong> Blue</li>
          <li><strong>Hate:<strong> Orange</li>
          <li><strong>Surprise:<strong> Violet</li>
       </ul>
    </p>
    <p><strong>Food</strong> {"favorite": "barbecue","hate": "broccoli","surprise": "pasta","new":["pizza","ice cream"]}</p>
    <p>
       <ul>
          <li><strong>Favorite:<strong> Barbecue</li>
          <li><strong>Hate:<strong> Broccoli</li>
          <li><strong>Surprise:<strong> Pasta</li>
          <li><strong>New:<strong>["pizza","ice cream"]</li>
       </ul>
    </p>

<div id="app">
  <div v-for="(item, index) in Object.entries(items[0])" :key="index">
    <div v-if="typeof item[1] !='object'">
      <p>
        <strong>{{item[0]}}:</strong> {{item[1]}}
      </p>
    </div>
    <div v-else>
      <p>
        <strong>{{item[0]}}:</strong>
        <ul>
          <li v-for="(innerItem, innerIndex) in  Object.entries(item[1]) ">
            <div v-if="!Array.isArray(innerItem[1])">
              <p>


                <strong>{{innerItem[0]}}:</strong>
                <span>{{innerItem[1]}}</span>
              </p>


            </div>
            <div v-else>
              <strong>{{innerItem[0]}}:</strong>

              <ul>
                <li v-for="(it2,in2) in innerItem[1]">{{it2}}</li>
              </ul>
            </div>
          </li>
        </ul>
      </p>
    </div>
  </div>


</div>