Question

I’m making a webapp that creates chatrooms. So say I click on a create room button and get this as an output in console:

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

How would I go about turning each queue entry into an HTML list that shows just the first and last name? I’ve never used jquery before, so I’m lost…thanks.

Answer 1

If you have an HTML element like this:

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

You might do something like:

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

Where json is the structure that showed in the question, something like:

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