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

Question

我有具有这种结构的“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 还不熟悉我......请帮助我:)

Answer 1

那么，您将必须添加为 Vue 编写的代码

如果你在一个vue应用中，你可以这样做

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

如果你在 html 页面中编写它。你可以分两步完成。

第一个是将文件链接添加为脚本

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

然后在vue脚本部分你可以将它分配给数据对象。

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

"ObjName"是文件中json对象的名称。

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