JSON到HTML表

Question

So before I start off, I'd like to say that I only know basic HTML and CSS. Now that that's out of the way, I have a JSON output at http://eu.bitswit.ch/api/server_leaderboard.php?server=71 and I would like to put that into HTML tables. I have looked around on Google/Youtube but none of them were in-depth enough to help me.

[{"nickname":"|Gates|Domon","steam_id":"STEAM_0:1:8647245","kills":379,"deaths":175,"suicides":0,"tks":5,"score":4590},{"nickname":"Ambassador Pineapple","steam_id":"STEAM_0:1:5287117","kills":372,"deaths":127,"suicides":0,"tks":2,"score":4500},{"nickname":"Clayton","steam_id":"STEAM_0:1:57875311","kills":307,"deaths":118,"suicides":0,"tks":6,"score":3595},{"nickname":"Fluffy Penguin","steam_id":"STEAM_0:1:40834109","kills":205,"deaths":136,"suicides":0,"tks":5,"score":1620},

Answer 1

I would use something like this (you need jQuery of some version to use this code though):

if (data.length > 0) {
    var $table = $("<table/>", { "class": "myTable" }).appendTo(document);

    var $headRow = $("<tr/>", { "class": "myHeadRow" }).appendTo($table);
    for (var val in data[0]) {
        var $headCell = $("<td/>", {
            "class": "myHeadCell",
            "text": val
        }).appendTo($headRow);
    }

    for (var i = 0; i < data.length; i++) {
        var $row = $("<tr/>", { "class": "myRow" }).appendTo($table);
        for (var val in data[i]) {
            var $cell = $("<td/>", {
                "class": "myCell",
                "text": data[i][val]
            }).appendTo($row);
        }
    }
}

But notice, it's not very fast way to do. I'd recommend you to get JSON on your server and manupulate with it from your PHP or C# code or whatever and then just show rendered table. It is bad tone in web, when page load speed depends on client's computing powers.