JSON Loop through nested array

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.

• Niccolò Campolungo: for (var i in report.persons){? anyway you can't loop through an object inside a string declaration!
• Zim84: why do you have the property persons as an object and not as an array holding objects?
• Felix Kling: possible duplicate of How do I enumerate the properties of a javascript object?

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

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

Answer 3

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>'
);