How to parse json in vue.js?

Question

I have a trouble in vue.js.

I wanna make the settings page on server program that has a xml data.

I think, That will work if done as follows :

1. server | parse xml to json
2. client | get json and read json
3. client | edit json
4. client | push json to server
5. server | parse json to xml
6. server | save xml

But I can't read json because received json data has '@'.

"?xml": {
   "@version": "1.0",
   "@encoding": "utf-8"
},
"Nodes": {
  "Node": [
  {
    "@type": "development",

 - - - - 

I can't read @type attribute in script..

// 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

<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.

Solution

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 notation if value name is invalid javascript variable name. Use it like this.

<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>

Comments

[Jayden]

I tried that. and i have a answer. so I can see no error in debug. but Console log show me 'undefined' message. I change code like this success: function (data) { var nodes = JSON.parse(JSON.stringify(data.Nodes)); console.log(nodes); console.log(nodes.length); console.log(nodes[0]); node.nodes = nodes; }, console.log(nodes); is worked. console.log(nodes.length); is not worked. console.log(nodes[0]); is not worked too.

[fullmetal]

Hi, @Jayden , I think in the comment above you should do something like this function (data) { var nodes = JSON.parse(JSON.stringify(data.Nodes.Node)); console.log(nodes); console.log(nodes.length); console.log(nodes[0]); node.nodes = nodes; } and then in HTML loop do v-for="node in node.nodes"

[Jayden]

Thanks Priyanka Gupta.