Parse json tree structure

Question

I'm trying to output all elements of this json :

{"nodes":[{"url":"asdfas","date":""},{"url":"asdfas","date":""},{"url":"asdfasfdasas","date":""}]}

Here is the code I have so far, but nothing is being outputted.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">

var arr = "{\"nodes\":[{\"url\":\"asdfas\",\"date\":\"\"},{\"url\":\"asdfas\",\"date\":\"\"},{\"url\":\"asdfasfdasas\",\"date"\:\"\"}]}";

for(var i=0;i<arr.length;i++){
    var obj = arr[i];
    for(var key in obj){
        var attrName = key;
        var attrValue = obj[key];
        $('body').append(attrName);
    }
}

</script>

<body>
</body>

EDIT:

Here is my updated file but still no output ? :

<!DOCTYPE html>
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">

//Or you can parse it from a string
  var arr = JSON.parse('{\"nodes\":[{\"url\":\"asdfas\",\"date\":\"\"},{\"url\":\"asdfas\",\"date\":\"\"},{\"url\":\"asdfasfdasas\",\"date"\:\"\"}]}');

  // You have to iterate over arr.nodes, not arr
  for(var i=0;i<arr.nodes.length;i++){
      var obj = arr.nodes[i];
      for(var key in obj){
          var attrName = key;
          var attrValue = obj[key];
          $('body').append(attrName);
      }
  }

</script>
</head>

<body>




</body>
</html>

`arr` is a string, `obj` is a character (but at least in Chrome I get some output, `key` is `0`, `format` and `truncate`). You have to parse the JSON first (or simply create an array of objects instead, depending on your actual use case). — Felix Kling, Feb 28 '12 at 22:29
possible duplicate of [Parse JSON string](http://stackoverflow.com/questions/1464354/parse-json-string) — Felix Kling, Feb 28 '12 at 22:29
arr is just a string, replace arr with the example code you have at the top of your post — anson, Feb 28 '12 at 22:30

Ruan Mendes · Accepted Answer · 2012-02-29T21:49:11.330

2

your JSON needs to be parsed or not put into a string;

// arr is a bad name, it is not an array, it's an object
// JSON is valid JavaScript
var arr = {"nodes":[{"url":"asdfas","date":""},{"url":"asdfas","date":""},{"url":"asdfasfdasas","date":""}]};

// Or you can parse it from a string
var arr = JSON.parse("{\"nodes\":[{\"url\":\"asdfas\",\"date\":\"\"},{\"url\":\"asdfas\",\"date\":\"\"},{\"url\":\"asdfasfdasas\",\"date\":\"\"}]}");

// You have to iterate over arr.nodes, not arr
for(var i=0;i<arr.nodes.length;i++){
    var obj = arr.nodes[i];
    for(var key in obj){
        var attrName = key;
        var attrValue = obj[key];
        $('body').append(attrName);
    }
}

edited Feb 29 '12 at 21:49

answered Feb 28 '12 at 22:32

Ruan Mendes

90,375
31
153
217

+1 http://jsbin.com/evavuc/edit#javascript,html,live **fixed line:** `var arr = JSON.parse('{\"nodes\":[{\"url\":\"asdfas\",\"date\":\""},{\"url\":\"asdfas\",\"date\":\""},{\"url\":\"asdfasfdasas\",\"date"\:\""}]}');` – Roko C. Buljan Feb 28 '12 at 22:44
@user470184: Did you see the link that roXon put up here? That shows that the above code does work. Your error is that your JSON is malformed, at the end of your JSON string, `\"date"\:\"\"}]}` should be `\"date\":\"\"}]}`. See the problem? You should have also seen that the problem was badly formatted JSON from the console. Be sure to always check the console output. Last thing, you don't need to escape your double quotes if you encase your string in single quotes as you have. That would have helped you see the problem. You shouldn't ever generate JSON by hand anyway. – Ruan Mendes Feb 29 '12 at 21:47
@roXon: Thanks, what you mentioned was the last step to get user470184's problems fixed. – Ruan Mendes Feb 29 '12 at 21:50

blue-sky · Answer 2 · 2012-03-01T09:01:36.840

0

This works for me (tested on chrome). I needed to use the .ready function :

<!DOCTYPE html>
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  <script>
  $(document).ready(function () { 
//Or you can parse it from a string
  var arr = JSON.parse('{\"nodes\":[{\"url\":\"asdfas\",\"date\":\"\"},{\"url\":\"asdfas\",\"date\":\"\"},{\"url\":\"asdfasfdasas\",\"date\":\"\"}]}');

  // You have to iterate over arr.nodes, not arr
  for(var i=0;i<arr.nodes.length;i++){
      var obj = arr.nodes[i];
      for(var key in obj){
          var attrName = key;
          var attrValue = obj[key];
          $('body').append(attrName);
      }
  }

  });

</script>
</head>

<body>




</body>
</html>

edited Mar 01 '12 at 09:01

answered Feb 28 '12 at 23:34

blue-sky

51,962
152
427
752

Doesn't work, still not valid json. Quote after the last date property is before the slash. – Ruan Mendes Mar 01 '12 at 06:49
I've updated the answer, should be ok now. Above code did work for me in chrome. – blue-sky Mar 01 '12 at 09:02

Parse json tree structure

2 Answers2