时间戳

首页 > 解决方案 > 在这个例子中如何使用 vue.js 访问嵌套的 json？

javascript - 在这个例子中如何使用 vue.js 访问嵌套的 json？

问题描述

在下面的示例中，如何正确访问 stage.name 的嵌套 json？

您可以在模板中看到我正在尝试访问舞台名称。

Vue.js

created() {
    url="http://{{ api_endpoint }}"
    fetch(url)
        .then(response => response.json())
        .then(body => {
            for(i=0; i<body.length; i++){
                this.job_execs.push({
                    'name': JSON.stringify(body[i].job.name),
                    'build_id': JSON.stringify(body[i].build_num),
                    'env': JSON.stringify(body[i].job.env),
                })
            }
    })



template: `
      <li v-for="item in this.job_execs">
        [[ item.build_num ]]
        <li v-if="stage in item.job">
          [[ stage.name ]]
        </li>
      </li>
    </ul>

示例 api

[
    {
        "build_num": 12,
        "job": {
            "name": "test-job",
            "env": "DEV",
            "tool": {
                "env": "DEV",
            },
            "product": {
                "name": "vuejs"
            },
            "platform": {
                "name": "none"
            },
            "stage": [
                {
                    "name": "stage1"
                },
                {
                    "name": "stage2"
                },
                {
                    "name": "stage3"
                },
            ]
        },
]

我猜我需要在 created 钩子中创建一个新列表并开始推送舞台名称？但是然后我会有两个列表？不确定执行此操作的最佳方法是什么。

标签： javascriptjsonvue.js

解决方案

如果您想<li>为每个阶段创建一个，它将是：

<li v-for="stage in item.job.stage">
  [[ stage.name ]]
</li>

注意v-for，不是v-if。

您可以将其v-for视为与此等效的模板：

item.job.stage.forEach(stage => {
    // ...
})

如果你只想要第一个，那么它是：

<li>
  [[ item.job.stage[0].name ]]
</li>

如果您确实想追求创建第二个列表的想法，那么您应该使用计算属性来完成，无需在created挂钩中做任何事情。在该计算属性中，您可以将数据缩减为更易于在模板中使用的格式。我不确定在这种情况下是否有必要，但如果您的需求比您发布的示例代码更复杂，那么这可能是一个好方法，而不是编写复杂的模板。

更新：

因此，这将是：

<ul>
  <li v-for="item in job_execs">
    [[ item.build_num ]]
    <ul>
      <li v-for="stage in item.job.stage">
        [[ stage.name ]]
      </li>
    </ul>
  </li>
</ul>

在您的 JavaScript 代码中，不需要所有这些JSON.stringify东西。

fetch(url)
    .then(response => response.json())
    .then(body => {
        this.job_execs = body
    })

如果您想要更接近原始代码build_num并重命名为的东西，build_id那么有几个选项，例如：

fetch(url)
    .then(response => response.json())
    .then(body => {
        for (let i = 0; i < body.length; i++) {
            this.job_execs.push({
                build_id: body[i].build_num,
                job: body[i].job
            })
        }
    })

然后，您需要在模板中build_num引用build_id。

就个人而言，我更倾向于使用forEach, for/of或map而不是直接for循环。例如：

fetch(url)
    .then(response => response.json())
    .then(body => {
        this.job_execs = body.map(item => {
            return {
                build_id: item.build_num,
                job: item.job
            }
        })
    })

但是，只有当您确实需要转换数据格式时，所有这些都是必要的。否则只能坚持this.job_execs = body。

推荐阅读