jquery - 用 jquery 创建 HTML 列表？

Question

我正在制作一个创建聊天室的网络应用程序。因此，假设我单击创建房间按钮并将其作为控制台中的输出：

{
    "statusCode": 200,
    "statusText": "QUEUE_OK",
    "data": {
        "roomStatus": "discussion",
        "queue": [
            {
                "id": "11",
                "user": "1",
                "room": "11",
                "inserted": "2013-01-19 23:58:16",
                "status": "1",
                "data": null,
                "first_name": "Danny",
                "last_name": "Sock"
            }
        ]
    }
}

我将如何将每个队列条目转换为仅显示名字和姓氏的 HTML 列表？我以前从未使用过 jquery，所以我迷路了……谢谢。

Answer 1

如果您有这样的 HTML 元素：

<ul id="list"></ul>

您可能会执行以下操作：

var ul = $("#list");
$.each(json.data.queue, function (idx, elem) {
    ul.append("<li>" + elem.first_name + " " + elem.last_name + "</li>")
})

json问题中显示的结构在哪里，例如：

var json = {
    "statusCode": 200,
    "statusText": "QUEUE_OK",
    "data"      : {
        "roomStatus": "discussion",
        "queue"     : [
            {
                "id"        : "11",
                "user"      : "1",
                "room"      : "11",
                "inserted"  : "2013-01-19 23:58:16",
                "status"    : "1",
                "data"      : null,
                "first_name": "Danny",
                "last_name" : "Sock"
            },
            {
                "id"        : "12",
                "user"      : "1",
                "room"      : "11",
                "inserted"  : "2013-01-19 23:58:16",
                "status"    : "1",
                "data"      : null,
                "first_name": "John",
                "last_name" : "Smith"
            }
        ]
    }
};