时间戳

首页 > 解决方案 > 如何从 Vue.js 中的 JSON 文件中获取数据？

javascript - 如何从 Vue.js 中的 JSON 文件中获取数据？

问题描述

我有具有这种结构的“modified_data.json”JSON 文件。

{
"data": [
    [
        {
           "account_id": "  "
           "account_name": "   "
        },
        {
           "account_id": "  "
           "account_name": "   "
        },          
        {
           "account_id": "  "
           "account_name": "   "
        },          
        {
           "account_id": "  "
           "account_name": "   "
        }
     ],
     [
        {
           "account_id": "  "
           "account_name": "   "
        },
        {
           "account_id": "  "
           "account_name": "   "
        },
        {
           "account_id": "  "
           "account_name": "   "
        }
     ],
     [
        {
           "account_id": "  "
           "account_name": "   "
        },
        {
           "account_id": "  "
           "account_name": "   "
        },
        {
           "account_id": "  "
           "account_name": "   "
        }
      ]
   ]
}

我想从每个数组中获取第一个对象的 account_name ...

有没有人可以给我一个解决方案？？

现在我使用Vue.js来显示它，我可以用python获取每个数据，但是Vue.js对我来说还不熟悉......请帮助我:)

标签： javascriptjsonvue.js

解决方案

Well, you will have to add the code that you have written for Vue

If you are in a vue app, you can do something like this 

<script>
      import json from './json/data.json'
      export default{
          data(){
              return{
                  myJson: json
              }
          }
      }
</script>

and if you are writting it inside an html page. you can do it in 2 steps.

1st is to add the file link as a script 

<script src="../file.json"></script>

then in the vue script section you can assign it to the data object. 

var ele = new Vue({
     el : "#YourElement", 
    data : ObjName
});

"ObjName" is a name of the json object in the file.

ObjName :
{
"data": [
    [
        {
           "account_id": "  "
           "account_name": "   "
        }

推荐阅读