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

【问题标题】：how to get data from JSON file in Vue.js?如何从 Vue.js 中的 JSON 文件中获取数据？
【发布时间】：2019-06-17 18:09:56
【问题描述】：

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

【问题讨论】：

嗨，Yohan，欢迎来到 StackOverflow！您可以先添加您尝试过的内容吗？ I want to get first object's account_name from each array 听起来更像是一个 Javascript 问题。

标签： javascript json vue.js

【解决方案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": "   "
        }

【讨论】：

感谢您的回答 :) 但我的 json 对象没有 ObjName。我想获取每个数组中第一个对象的“account_name”。有什么解决办法吗？

【解决方案2】：

您可以使用 computed property 来响应式地获取每个数组的第一个对象的 account_name 属性：

const data = {
  "data": [
    [
      {
        "account_id": "11",
        "account_name": "name11"
      },
      {
        "account_id": "12",
        "account_name": "name12"
      },
      {
        "account_id": "13",
        "account_name": "name13"
      },
      {
        "account_id": "14",
        "account_name": "name14"
      }
    ],
    [
      {
        "account_id": "21",
        "account_name": "name21"
      },
      {
        "account_id": "22",
        "account_name": "name22"
      },
      {
        "account_id": "23",
        "account_name": "name23"
      }
    ],
    [
      {
        "account_id": "31",
        "account_name": "name31"
      },
      {
        "account_id": "32",
        "account_name": "name32"
      },
      {
        "account_id": "33",
        "account_name": "name33"
      }
    ]
  ]
}


new Vue({
  el: '#demo',
  data() {
    return {
      data: data.data
    }
  },
  computed: {
    firstAccountNames() {
      return this.data.map(dataSet => dataSet[0].account_name)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <ul>
    <li v-for="name in firstAccountNames">
      {{ name }}
    </li>
  </ul>
</div>

【讨论】：

还有一个问题。如果我将我的 json 数据放入脚本中，它可以工作..但是当我尝试读取 json 文件（相同的内容）时，控制台总是显示错误消息。 Firefox：SyntaxError：JSON.parse：JSON 数据的第 1 行第 1 列的意外字符 Chrome：未捕获的 SyntaxError：JSON.parse（）位置 0 处的 JSON 中的意外标记 m 我应该怎么做才能成功加载 json 文件?
@YohanChoi 可能是您的 Web 应用程序构建工具（我猜是 webpack），自动将 JSON 转换为 JavaScript 对象。尝试删除手动解析（JSON.parse），只需将导入的数据用作 JavaScript 对象。

【解决方案3】：

我解决了！这是代码！

var app = new Vue({
el: '#app',
data: {
    datas: []
},

computed: {
    getAccountNames() {
        return this.datas.map(dataSet => dataSet[0].account_name)
    }
},

mounted() {
    var self = this
    $.getJSON("modified_data.json", function(json_data) {
        self.datas = json_data.data
    })
  }
})

无论如何，另一个问题... "this" 和 "self" 和有什么不一样？我认为“self”等于“this”，但是当我只使用“this”时，它有错误但“self”效果很好......谁能告诉我区别？

【讨论】：

关于 this 和 self - "this" 的上下文在 $.getJSON 的回调中发生变化，因此 "self" 只是一个自定义命名变量，用于捕获要使用的 "this" 的引用稍后，在它被回调上下文覆盖之前。