JSON Loop через вложенный массив

Question

Это мой JS ("данные" от вызова JSon):

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 

. . . 

Это мой JSON:

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

Я новичок в JSON и после поиска для ответа и на самом деле найти несколько разных ответов, возникли новые проблемы, поэтому я подумал, что поставил бы вопрос здесь целиком.

Где комментарий в моем JavaScript-коде, я хочу пройти через report.persons.

Во всех решениях, которые я нашел, они могли указывать прямо на «заголовок» или «текст», как я делал раньше, но в этом случае у меня есть только ключ и значение. Как я буду делать что-то подобное?

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

Я понимаю, что мне придется сделать еще один for цикл, но мое знание не достаточно хорошо, чтобы быть в состоянии выяснить, сам по себе, как построить его.

Answer 1

Для вашего кода, я хотел бы использовать функцию, которая перебирает reports.persons и возвращает то, что вам нужно:

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

И теперь вы можете использовать это, чтобы добавить все, что материал внутри <ul> теги:

listPersons(report.persons); 

Если вы хотите код чтения ближе к тому, что вы хотите (и быть в состоянии использовать person.name и person.value), то вы должен иметь JSON в таком формате:

{ 
    "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 2

Это довольно основной материал

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>"; 
    } 
} 

, а затем:

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

Answer 3

$('#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>' 
);