Как отобразить вложенный JSON объект

Question

У меня есть следующий вывод JSON:

[ 
    { 
    "meeting_team_members": [ 
     { 
     "team_member_name": "teammember2", 
     "team_member_email": "teammember2@email.com", 
     "full_image": "\/media\/no-image.png" 
     } 
    ], 
    "meeting_time": "19:45:00", 
    "meeting_title": "THIS IS MEETING 1", 
    "meeting_date": "2015-08-04" 
    }, 
    { 
    "meeting_team_members": [ 
     { 
     "team_member_name": "teammember2", 
     "team_member_email": "teammember2@email.com", 
     "full_image": "\/media\/no-image.png" 
     } 
    ], 
    "meeting_time": "19:45:00", 
    "meeting_title": "THIS IS MEETING 2", 
    "meeting_date": "2015-08-04" 
    } 
] 

Я использую JQuery getJSON для вывода в моем html:

$.getJSON(get_meetings_url, function(data) { 
     $('#json').empty(); 

     var items = []; 

     $.each(data, function(index, value) { 
      items.push("<li>"+value.meeting_title+" - "+value.meeting_team_members+"</li>"); 
     }); 
    }); 

Однако, когда я пытаюсь позвонить value.meeting_team_members в items_push он возвращает [object Object]. Как перебирать по вложенным meeting_team_members?

EDIT

Я хотел бы выход HTML, чтобы быть следующим:

<ul> 
<li>meeting_title</li> 
<ul><li>meeting_team_members.team_member_name</li></ul> 
</ul> 

Answer 1

Вы можете использовать библиотеку, которая делает это уже, как renderjson.

Чтобы реализовать его самостоятельно, вы можете написать рекурсивную функцию. Если элемент, который вы собираетесь печатать, представляет собой массив или объект, вы хотите сделать рекурсивный вызов и распечатать содержимое этого элемента.

Оказывается, это довольно просто:

function print_json(obj) { 
    var ul = $("<ul>"); 

    for (var i in obj) { 
     var li = $("<li>"); 

     li.append(document.createTextNode(i + ": ")); 

     if (typeof obj[i] === "object") { 
      li.append(print_json(obj[i])); 
     } else { 
      li.append(document.createTextNode(obj[i])); 
     } 

     ul.append(li); 
    } 

    return ul; 
} 

В принципе, если мы когда-либо вызвать функцию, мы ожидаем, чтобы вернуться новый ul элемент, поэтому мы создаем один в начале и добавить к нему.

Затем мы перебираем каждый элемент в заданном объекте. Это может быть массив, другой объект или просто строка, целое число или другой примитив.

На каждой итерации мы хотим создать новый li. Затем мы добавляем ключ (для массивов, это индекс, для объектов это ваш указанный ключ при создании объекта). И, наконец, мы проверяем, является ли объект, который мы хотим напечатать, другим объектом (typeof массив оценивается как object, поэтому он также работает для массивов). Если это так, мы вызываем функцию рекурсивно на объект, чтобы получить для этого ul.

Если нет, мы просто добавляем текстовый узел для самого элемента.

Here Это действующее лицо.

Answer 2

Мой ответ для тех, кто интересуется:

// create JSON 
    $.getJSON(get_meetings_url, function(data) { 
     $('#json').empty(); 

     var items = [] 
     var team_items = [] 

     $.each(data, function(index, value) { 
      items.push("<li>"+value.meeting_title+"</li>") 

      $.each(value.meeting_team_members, function(index, value){ 
       items.push("<ul><li>"+value.team_member_name+"</li></ul>") 
      }); 
     }); 


     if (items.length == 0){ 
      $('#json').html('<h2>Empty</h2>') 
     } 
     else{ 
      $('#json').html('<h2>Meetings</h2><ul>' + items.join("")+"</ul>") 

     } 

Answer 3

Ниже рабочий раствор для вашей проблемы.

function ShowMeetings() { 

     var data = [ 
         { 
          "meeting_team_members": [ 
          { 
           "team_member_name": "teammember2", 
           "team_member_email": "teammember2@email.com", 
           "full_image": "\/media\/no-image.png" 
          } 
         ], 
          "meeting_time": "19:45:00", 
          "meeting_title": "THIS IS MEETING 1", 
          "meeting_date": "2015-08-04" 
         }, 
         { 
          "meeting_team_members": [ 
          { 
           "team_member_name": "teammember2", 
           "team_member_email": "teammember2@email.com", 
           "full_image": "\/media\/no-image.png" 
          } 
         ], 
          "meeting_time": "19:45:00", 
          "meeting_title": "THIS IS MEETING 2", 
          "meeting_date": "2015-08-04" 
         } 
       ]; 

     $('#json').empty(); 

     var ul = CreateMeetingsUL(data); 

     $('#json').html(ul); 
    } 

function CreateMeetingsUL(data) { 
     var ul = "<ul>"; 
     $.each(data, function (index, value) { 
      ul += "<li>" + value.meeting_title + "</li>"; 
      ul += CreateTeamMembersUL(value.meeting_team_members); 
     }); 
     ul += "</ul>"; 

     return ul; 
    } 

function CreateTeamMembersUL(data) { 
     var ul = "<ul>"; 
     $.each(data, function (index, value) { 
      ul += "<li>" + value.team_member_name + "</li>"; 
     }); 
     ul += "</ul>"; 

     return ul; 
    }