Json Array對象訪問

Question

我想要一些幫助來獲取數據形式的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文件

Answer 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文件的信息。

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

使用上面的代碼，我根據自己的需要利用並習慣於實現，並且有效