Jquery 如何显示嵌套的JSON对象_Jquery_Json_Each_Getjson

Jquery 如何显示嵌套的JSON对象

jquery json

Jquery 如何显示嵌套的JSON对象,jquery,json,each,getjson,Jquery,Json,Each,Getjson,我有以下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",

我有以下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>");
        });
    });

您可以使用已经这样做的库，如

要自己实现它，您可以编写一个递归函数。如果要打印的元素是数组或对象，则需要进行递归调用并打印该项的内容

结果很简单：

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

函数打印（obj）{ var ul=$（“

”）； li.append（document.createTextNode（i+“：”））； if（对象类型[i]=“对象”）{ 追加（print_json（obj[i]）； }否则{ li.append（document.createTextNode（obj[i]）； } ul.附加（li）； } 返回ul； } 基本上，如果调用该函数，我们希望返回一个新的

ul

元素，因此我们在开始时创建一个并附加到它

然后，我们循环给定对象中的每个项。它可以是一个数组、另一个对象，或者只是一个字符串、整数或其他原语

在每次迭代中，我们希望创建一个新的

li

。然后，我们附加键（对于数组，它是索引；对于对象，它是实例化对象时指定的键）。最后，我们检查要打印的项目是否是另一个对象（数组的

typeof

计算结果为

object

，因此它也适用于数组）。如果是，我们递归调用对象上的函数，以获取该对象的

ul

如果不是，我们只是为项目本身附加文本节点

它正在发挥作用。

我对感兴趣的人的回答是：

    // 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
$.getJSON（获取会议url，函数（数据）{
$（'#json'）.empty（）；
变量项=[]
var团队_项目=[]
$.each（数据、函数（索引、值）{
项目。推送（“”+值。会议标题+“”）
$.each（value.meeting\u team\u成员、功能（索引、值）{
项目。推送（“”+值。团队成员名称+”）
});
});
如果（items.length==0）{
$（'#json'）.html（'Empty'））
}
否则{
$（'#json'）.html（'Meetings'+items.join（““”+””）
}

以下是解决您问题的有效方法

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

函数ShowMeetings（）{
风险值数据=[
{
“会见团队成员”：[
{
“团队成员姓名”：“团队成员2”，
“团队成员电子邮件”：teammember2@email.com",
“完整图像”：“\/media\/no image.png”
}
],
“会议时间”：“19:45:00”，
“会议名称”：“这是第1次会议”，
“会议日期”：“2015-08-04”
},
{
“会见团队成员”：[
{
“团队成员姓名”：“团队成员2”，
“团队成员电子邮件”：teammember2@email.com",
“完整图像”：“\/media\/no image.png”
}
],
“会议时间”：“19:45:00”，
“会议名称”：“这是第二次会议”，
“会议日期”：“2015-08-04”
}
];
$（'#json'）.empty（）；
var ul=CreateMeetingsUL（数据）；
$（'#json'）.html（ul）；
}
函数CreateMeetingsUL（数据）{
var ul=“”；
$.each（数据、函数（索引、值）{
ul+=“”+value.meeting_title+””；
ul+=CreateTeamMembersUL（价值会议团队成员）；
});
ul+=“”；
返回ul；
}
函数CreateTeamMembersUL（数据）{
var ul=“”；
$.each（数据、函数（索引、值）{
ul+=“”+value.team\u member\u name+””；
});
ul+=“”；
返回ul；
}

与使用

$迭代外部数据结构的方式相同。每个@FelixKling谢谢，所以我会在项中执行。推送（##这里的代码）
？提示：嵌套对象==嵌套For循环：）可能不是。您首先必须考虑将会议团队成员转换为什么（即，您希望如何在HTML中表示它？）。这应该在项之前完成。推送。谢谢，所以说我希望保持它的简单，并根据我的编辑输出，有什么想法吗？谢谢，您能举个例子吗？@alias51:使用基本示例编辑。如果需要，可以很容易地修改它以满足您的需要。
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;
    }