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？

修改

我希望HTML输出如下：

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

Answer 1

以下是您的问题的可行解决方案。

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

Answer 2

您可以使用已经执行此操作的库，例如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 3

我对那些感兴趣的人的答案：

    // 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>")

        }

如何显示嵌套的JSON对象

3 个答案: