JSON循环遍历嵌套数组

Question

This is my JS ("data" is from the json call):

if (data.projectReports.length) {
  for (var i in data.projectReports){
    var report = data.projectReports[i];
    $('#reports').append(
        '<div class="report-description">' +
          '<h2>' + report.header + '</h2>' +
          '<p>' + report.text + '</p>' +
        '</div>' +
        '<ul class=\"report-moreinfo\">' +

          // I want to loop through "persons" here.

        '</ul>'
    );
  }
} else

. . .

This is my JSON:

{
  "projectReports":[
    {
      "header":"Headline",
      "text":"Description of item",
      "estimate":10,
      "actual":7,
      "persons":{
        "Robert":5,
        "Erik":10,
        "Juan":3
      }
    }
  ]
}

I am new to JSON and after searching for an answer and actually finding a few different answers, new problems arose so I thought I would post the question in it's entirety here.

Where the comment is in my JavaScript code, I want to loop through report.persons .

In all of the solutions I found they could point directly to "header" or "text" like I have done before, but in this case I just have a key and value. How would I go about doing something like this?

<li><p> persons.key </p><p> persons.value </p></li>

I understand that I will have to do another for loop, but my knowledge isn't good enough to be able to figure out on my own how to construct it.

Answer 1

This is pretty basic stuff

var personsMarkup = "";
for (var i in persons){
   if (persons.hasOwnProperty(i)){
     console.log(i);          // the key
     console.log(persons[i]); // the value
     // cancat this all together
     personsMarkup =+ "<li><p>"+i+"</p><p>"+persons[i]+"</p></li>";
   }
}

and then:

$('#reports').append(
    /* ... */
    '<ul class=\"report-moreinfo\">' +
    personsMarkup +
    '</ul>';
    /* ... */
);

Answer 2

Use for (.. in ..)

$('#reports').append(
    '<div class="report-description">' +
      '<h2>' + report.header + '</h2>' +
      '<p>' + report.text + '</p>' +
    '</div>' +
    '<ul class=\"report-moreinfo\">');

for (var personKey in report.persons){
  $('#reports').append('<li><p>' + personKey + '</p><p>' + report.persons[personKey] + '</p></li>');
}

$('#reports').append(
    '</ul>'
);

Answer 3

For your code I'd use a function that loops through reports.persons and returns what you need:

var showPersons = function(persons){
  var appendedData = '';
  for (var person in persons) {
    if (!persons.hasOwnProperty(person)) continue;
    appendedData += '<li><p>' + person + '</p><p>' + persons[person] +'</p></li>'
  }
  return appendedData;
};

And now you can use this to append all that stuff inside the <ul> tags:

listPersons(report.persons);

If you wanted the code read closer to what you wanted (and to be able to use person.name and person.value ), you'd need to have the JSON in this format:

{
    "projectReports": [
        {
            "header": "Headline",
            "text": "Description of item",
            "estimate": 10,
            "actual": 7,
            "persons": [
                {
                    "name": "Robert",
                    "value": 5
                },
                {
                    "name": "Erik",
                    "value": 10
                },
                {
                    "name": "Juan",
                    "value": 3
                }
            ]
        }
    ]
}