如何在vue.js中解析json？
如何在vue.js中解析json？
提问于 2018-02-03 03:46:36
我在vue.js上遇到了麻烦。
我想在有xml数据的服务器程序上创建设置页面。
我认为，如果这样做的话，可以做到以下几点：
- server =解析xml到json
- 获取json并读取json
- 客户端编辑json
- 将json推送到服务器
- server =解析json to xml
- 服务器/保存xml
但是我不能读json，因为接收到的json数据有“@”。
"?xml": {
"@version": "1.0",
"@encoding": "utf-8"
},
"Nodes": {
"Node": [
{
"@type": "development",
- - - - 我无法在脚本中读取@type属性。
//脚本
<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
<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>感谢阅读。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-02-03 05:04:44
我对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>Stack Overflow用户
发布于 2018-02-03 07:45:54
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.页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48593737
复制相关文章
相似问题
腾讯云开发者
