CODEWITHSUNDEEP
phphtmljson
user2705720
user2705720

Reputation: 1

JSON to HTML table

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

Upvotes: 0

Views: 187

Answers (2)

Emilio Gort
Emilio Gort

Reputation: 3470

json example from the url in the question: http://eu.bitswit.ch/api/server_leaderboard.php?server=71

{"query":"71","response":0,"query_time":"402.04ms","data":[{"nickname":"Gates Domon","steam_id":"STEAM_0:1:8647245","kills":380,"deaths":175,"suicides":0,"tks":5,"score":4595}]}  

$json = file_get_contents(' http://eu.bitswit.ch/api/server_leaderboard.php?server=71'); // this WILL do an http request for you
    $data = json_decode($json, true);
    $array = $data['data'];
    $table = "<table cellpadding='5'>
<thead>
    <th>nickname</th>
    <th>steam_id</th>
    <th>kills</th>
    <th>deaths</th>
    <th>suicides</th>
    <th>tks</th>
    <th>score</th>
 </thead>
 <tbody>";
    foreach ($array as $value) {
        $table .="<tr>
<td>{$value['nickname']}</td>
<td>{$value['steam_id']}</td>
<td>{$value['kills']}</td>
<td>{$value['deaths']}</td>
<td>{$value['suicides']}</td>
<td>{$value['tks']}</td>
<td>{$value['score']}</td>
</tr>";
    }
    $table .="</tbody></table>";

    echo $table;

Upvotes: 1

Vladislav Qulin
Vladislav Qulin

Reputation: 1932

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.

Upvotes: 0

Related Questions