如何从 Vue.js 中的 JSON 文件中获取数据?
Posted
技术标签:
【中文标题】如何从 Vue.js 中的 JSON 文件中获取数据?【英文标题】:how to get data from JSON file in Vue.js? 【发布时间】: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,欢迎来到 ***!您可以先添加您尝试过的内容吗?I want to get first object's account_name from each array
听起来更像是一个 javascript 问题。
【参考方案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" 的引用稍后,在它被回调上下文覆盖之前。以上是关于如何从 Vue.js 中的 JSON 文件中获取数据?的主要内容,如果未能解决你的问题,请参考以下文章
从 Vue.js 中的 JSON 文件导入数据而不是手动数据