遍历对象数组

Question

I have a JSON string like this

 var json =  '{ "Comments": 
    [
      { "Id" : 1,"Comment" : "Test comment","Name" : "Yogesh","Child" : 0},
      { "Id" : 2,"Comment" : "Test comment II","Name" : "Yogesh","Child" : 0}
    ] 
    }';

and I'm trying to iterate over the objects as such:

var parsedJSON = $.parseJSON(json);

var html = "";    
for (comment in parsedJSON.Comments) {
  html += "Id: " + comment.Id;
  html += "Comment: " + comment.Comment;
  html += "Name: " + comment.Name;
  html += "Child: " + comment.Child;
  html += "<br/>";
}

But here comment in for loop becomes 0 and 1 only, I mean not an object but just a string, how can I iterate over this array?

Answer 1

var json = '{ "Comments": [{ "Id" : 1,"Comment" : "Test comment","Name" : "Yogesh","Child" : 0},{ "Id" : 2,"Comment" : "Test comment II","Name" : "Yogesh","Child" : 0}] }';

var parsedJSON = $.parseJSON(json), // jsonData should json
    html = "",
    comments =parsedJSON.Comments; // keeping reference of parsedJSON and its an Array

// Here key will give 0, 1 etc ie. index of array

for (var key in comments) {
    html += "Id: " + comments[key].Id;
    html += "Comment: " + comments[key].Comment;
    html += "Name: " + comments[key].Name;
    html += "Child: " + comments[key].Child;
    html += "<br/>";
}

Demo

Answer 2

You seem to have misunderstood how for..in loops work. comment will iteratively be the keys of the array. In any case, you should not use for..in on an array, only objects - and even then with caution.

var l = parsedJSON.Comments.length, i, comment;
for( i=0; i<l; i++) {
    comment = parseJSON.Comments[i];
    // do stuff with comment
}

Answer 3

YOu can try this:

     var JsonData =  { "Comments":
        [
          { "Id" : 1,"Comment" : "Test comment","Name" : "Yogesh","Child" : 0},
          { "Id" : 2,"Comment" : "Test comment II","Name" : "Yogesh","Child" : 0}
        ]
        };

    var html = "";    
    for (var i = 0; i < JsonData.Comments.length; i++) {
      comment = JsonData.Comments[i];
      html += "Id: " + comment.Id;
      html += " Comment: " + comment.Comment;
      html += " Name: " + comment.Name;
      html += " Child: " + comment.Child;
      html += "<br/>";
    }

alert(html);

Answer 4

You can use $.each :

var html = ""; 
$.each(parsedJSON.Comments, function(i, comment) {
   html += "Id: " + comment.Id;
   html += "Comment: " + comment.Comment;
   html += "Name: " + comment.Name;
   html += "Child: " + comment.Child;
   html += "<br/>";
}

Alternatively, you could use $.map :

var html = $.map(parsedJSON.Comments, function(comment, i) {
   return "Id: " + comment.Id +
          "Comment: " + comment.Comment +
          "Name: " + comment.Name +
          "Child: " + comment.Child + 
          "<br/>";
}).join('');

Answer 5

Comments holds an array with two elements.

{ "Comments" : [ { 1 }, { 2 }]  ...

So you can access it with

for (var i = 0, len = parsedJSON.Comments.length; i < len; i++) {
    html += "Id: " + parsedJSON.Comments[i].Id;
    html += "Comment: " + parsedJSON.Comments[i].Comment;
    html += "Name: " + parsedJSON.Comments[i].Name;
    html += "Child: " + parsedJSON.Comments[i].Child;
    html += "<br/>";
}