如何在 vue.js 中解析 json？答案

【问题标题】：How to parse json in vue.js?如何在 vue.js 中解析 json？
【发布时间】：2018-07-13 14:34:27
【问题描述】：

我在 vue.js 中遇到了问题。

我想在有 xml 数据的服务器程序上创建设置页面。

我认为，如果按以下方式完成，那将起作用：

服务器 |将 xml 解析为 json
客户 |获取json并读取json
客户 |编辑json
客户 |将 json 推送到服务器
服务器 |将 json 解析为 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>

感谢阅读。

【问题讨论】：

标签： javascript json xml vue.js

【解决方案1】：

我不擅长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>

【讨论】：

【解决方案2】：

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.

【讨论】：