Question

我正在创建一个创建聊天室的webapp。所以说我点击创建房间按钮并将其作为控制台中的输出：

{
    "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"
            }
        ]
    }
};

使用jquery创建HTML列表？

1 个答案: