Json 数组对象访问答案

【问题标题】：Json Array object accessJson 数组对象访问
【发布时间】：2017-08-09 12:14:47
【问题描述】：

我需要一些帮助来获取数据形式的 json 数组文件在链接中

  Html
  <div>
    <div v-for="data in myJson.id " >{{ data }}</div>
  </div>
      js
    import json from '.././json/data.json'
      export default {
    components: {
      MainLayout,
    },
  data: function(){
        return {
          myJson:json
        }
      },
  method:{
    getjson:function(){
      this.json = JSON.parse(myJson);
    }
  }
  }

我只想访问具有某些特定 ID 的数据，而我无法使用我正在使用的语法访问它

编辑 Json file

【问题讨论】：

没有“json 数组”这样的东西。你要么有一个 JSON 数据字符串，要么有一个 JS 数组。您尝试过的语法是什么样的？
你只是在解析你的json响应，你想访问哪里？
抱歉解析功能不工作
您在此 json 上没有 id 属性，因此无法访问它。是否要检查 name 属性？

标签： javascript arrays json vue.js vuejs2

【解决方案1】：

显然，您甚至不需要JSON.parse。没有它似乎也可以工作...将您的 JSON 文件与组件放在同一目录中并尝试以下操作：

import data from './data.json'

export default {
  created () {
    for (const item of data[0]['file']) {
      console.log(`
        Name: ${item.name}
        Type: ${item.type}
        Size: ${item.filesize}
        Dimensions: ${item.dimension[0].width}x${item.dimension[0].height}
      `)
    }
  }
}

当页面加载时，您应该会在控制台中看到来自 JSON 文件的信息。

【讨论】：

【解决方案2】：

    <script>
  import MainLayout from '../layouts/Main.vue'
  import json from '.././json/data.json'

  export default {
    components: {
      MainLayout,
    },
  data: function(){
    return {
     myJson: json[0].file
    }
  },
  method:{

    }
  }
</script>   

 html
  <div v-for="data in myJson">
    {{ data.name }}
    {{ data.filesize}}
    {{ data.dimension[0].width}}x{{data.dimension[0].height}}
  </div>

使用上面的代码，我根据自己的需要使用并习惯于实现它并且它有效

【讨论】：