javascript 如何从 Vue.js 中的 JSON 文件中获取数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54339331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to get data from JSON file in Vue.js?
提问by Yohan Choi
I have 'modified_data.json' JSON file which has this structure.
我有具有这种结构的 '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": " "
}
]
]
}
I want to get first object's account_name from each array...
我想从每个数组中获取第一个对象的 account_name ......
Does anyone can give me a solution??
有没有人可以给我一个解决方案？？
Now I'm using Vue.js to display it, I could get each data with python, but Vue.js is not familiar with me yet... Kindly help me :)
现在我使用Vue.js来显示它，我可以用python获取每个数据，但是Vue.js我还不熟悉......请帮助我:)
采纳答案by antonku
You can use a computed propertythat would reactively take account_nameproperty of the first object of every array:
您可以使用计算属性，该属性会被动地获取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>回答by zetawars
Well, you will have to add the code that you have written for Vue
好吧，您将不得不添加您为 Vue 编写的代码
If you are in a vue app, you can do something like this
如果你在一个 vue 应用程序中，你可以做这样的事情
<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.
如果您将它写在 html 页面中。你可以分两步完成。
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.
然后在 vue 脚本部分，您可以将其分配给数据对象。
var ele = new Vue({
el : "#YourElement",
data : ObjName
});
"ObjName" is a name of the json object in the file.
“ObjName”是文件中json对象的名称。
ObjName :
{
"data": [
[
{
"account_id": " "
"account_name": " "
}
回答by Yohan Choi
I solved it! here is code!
我解决了！这是代码！
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
})
}
})
Anyway, another question... what is the difference between "this" and "self" ? "self" is equal to "this" I think but when I just use "this", it has error but "self" works well...anyone can tell me the difference?
无论如何，另一个问题......“this”和“self”有什么区别？我认为“self”等于“this”，但是当我只使用“this”时，它有错误，但“self”效果很好……谁能告诉我有什么区别？
