javascript 如何在 vue.js 中解析 json？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48593737/
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 parse json in vue.js?
提问by Jayden
I have a trouble in vue.js.
我在 vue.js 中遇到了麻烦。
I wanna make the settings page on server program that has a xml data.
我想在具有 xml 数据的服务器程序上制作设置页面。
I think, That will work if done as follows :
我认为，如果按以下方式完成，那将起作用：
- server | parse xml to json
- client | get json and read json
- client | edit json
- client | push json to server
- server | parse json to xml
- server | save xml
- 服务器 | 将 xml 解析为 json
- 客户 | 获取 json 并读取 json
- 客户 | 编辑json
- 客户 | 将json推送到服务器
- 服务器 | 将 json 解析为 xml
- 服务器 | 保存xml
But I can't read json because received json data has '@'.
但我无法读取 json，因为收到的 json 数据有“@”。
"?xml": {
"@version": "1.0",
"@encoding": "utf-8"
},
"Nodes": {
"Node": [
{
"@type": "development",
- - - -
I can't read @type attribute in script..
我无法读取脚本中的 @type 属性..
// script
// 脚本
<script>
var node = new Vue({
el: '#Nodes',
data: {
json: null
},
filters: {
checkNum: function(value) {
var result = value;
if (value < 10) {
var result = "0" + value;
}
return result;
},
}
})
$(document).ready(function(){
console.log("ready");
getNodes();
setTimeInterval();
});
function getNodes() {
var $url ="http://localhost:21004/nodes/current/get/json"
$.ajax({
url: $url,
type: 'get',
success: function (data) {
console.log(data);
console.log(data.Nodes[0].type);
node.json = data;
},
error: function(err) {
console.log(err);
}
})
}
function setTimeInterval () {
setInterval(function() {
getNodes();
},3000)
}
</script>
// HTML
// HTML
<ul id="Nodes">
<li v-for="node in json.Nodes">
{{ node.@type }}
{{ node.@group }}
{{ node.@name }}
<li v-for="item in node.Items">
{{ node.@name }}
{{ node.@defaultValue }}
{{ node.@expression }}
{{ node.@format }}
</li>
</li>
</ul>
Thanks to read.
感谢阅读。
采纳答案by Talgat Saribayev
I am not good with vue. But from you code I can say you have issue with objects. You cann't access to value with dot notationif value name is invalid javascript variable name. Use it like this.
我不擅长 vue。但是从你的代码我可以说你有对象问题。如果值名称是无效的 javascript 变量名称，则无法使用点表示法访问值。像这样使用它。
<ul id="Nodes">
<li v-for="node in json.Nodes">
{{ node['@type'] }}
{{ node['@group'] }}
{{ node['@name'] }}
<li v-for="item in node.Items">
{{ item['@name'] }}
{{ item['@defaultValue'] }}
{{ item.['@expression'] }}
{{ item.['@format'] }}
</li>
</li>
</ul>
回答by Priyanka Gupta
console.log(nodes.length); This won't work because your object
structure is like following :
"Nodes": {
"Node": [
{
"@type": "development",
- - - -
where in **Nodes is an object which has a key as "Node" and this "Node"
key is an array** so console.log(nodes.node.length) should work.
