如何显示嵌套的 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>");
        });
    });

但是，当我尝试在 items_push 中调用 value.meeting_team_members 时，它 returns [object Object]。如何遍历嵌套的 meeting_team_members?

编辑

我希望 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;
    }

如何显示嵌套的 JSON 对象

How to display nested JSON object

each

jquery

json

getjson