无法从嵌套的dict json（vue）中访问元素答案

【问题标题】：Can't access element from within nested dict json (vue)无法从嵌套的dict json（vue）中访问元素
【发布时间】：2020-08-12 23:37:18
【问题描述】：

我有以下 json 字典：

{
   "result_list":[
      {
         "device_id":"1",

         "latest_device_point":{
            "device_point_id":"6erDcYJtPkm58k81f07-0F",
            "dt_server":"2020-08-12T22:21:16.135338Z",
            "dt_tracker":"2020-08-12T22:21:13Z",
            "lat":33.9902063,
            "lng":-117.9827849,
            "altitude":137.34,
            "angle":192,
            "speed":0,
            },
      },
          "device_id":"2",

         "latest_device_point":{
            "device_point_id":"6erDcYJtPkm58k81f07-0F",
            "dt_server":"2020-08-12T22:21:16.135338Z",
            "dt_tracker":"2020-08-12T22:21:13Z",
            "lat":33.9902063,
            "lng":-117.9827849,
            "altitude":137.34,
            "angle":192,
            "speed":0,
            },
      },

    ...

}

我想遍历列表中的所有设备，并在 Vue 中访问它们的 id 和 speed 属性：

        <div v-for="device in info" v-bind:key="device">
          <h7> ID# {{device.device_id}} </h7>
          <h7> Speed: {{device.latest_device_point.speed}} </h7> -->
        </div>

我在获取 device_id 时没有问题，甚至可以在 device.latest_device_point 处获取整个字典，但是当我尝试访问 {{device.latest_device_point.speed}} 时代码中断："TypeError: Cannot read property 'speed' of null"。我究竟做错了什么？这是我的 axios 调用：

  mounted () {
    axios
      .get(path + this.key)
      .then(response => (this.info = response.data.result_list))
  }

谢谢！

【问题讨论】：

标签： json api vue.js

【解决方案1】：

这有点远，但可能是您列表中的某些元素具有latest_device_point，它等于null。

要停止中断，您可以尝试有条件地渲染此行：

<div v-for="device in info" v-bind:key="device.device_id">
   <h7> ID# {{device.device_id}} </h7>
   <h7 v-if="device.latest_device_point"> Speed: {{device.latest_device_point.speed}} </h7>
</div>

这将检查device.latest_device_point 是否为空，如果不是则仅显示speed 属性。

例如，我还建议您查看您的数据，看看 console.log 是否属于这种情况。

此外，最好将device_id 用作key 而不是完整的对象。

可能导致此错误的示例：

let data = [
    {
       "device_id":"1",
       "latest_device_point": {
          "device_point_id":"6erDcYJtPkm58k81f07-0F",
          "dt_server":"2020-08-12T22:21:16.135338Z",
          "dt_tracker":"2020-08-12T22:21:13Z",
          "lat":33.9902063,
          "lng":-117.9827849,
          "altitude":137.34,
          "angle":192,
          "speed":0,
        },
    },
    {
       "device_id":"2",
       "latest_device_point": null
    }
]
console.log(data[0].latest_device_point.speed)
console.log(data[1].latest_device_point.speed)

【讨论】：