JSON转HTML表

Question

所以在我开始之前，我想说我只知道基本的HTML和CSS。现在，我在http://eu.bitswit.ch/api/server_leaderboard.php?server=71中有了一个JSON输出，我想把它放到HTML表中。我在Google/Youtube上四处寻找，但都没有深入到能帮助我的地方。

[{"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

问题中的url中的json示例：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;

Answer 2

我会使用类似这样的代码(不过，您需要某个版本的jQuery才能使用此代码)：

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);
        }
    }
}

但请注意，这并不是一种非常快速的方法。我建议你把JSON放到你的服务器上，从你的PHP或C#代码中手动修改，然后只显示呈现的表。当页面加载速度依赖于客户端的计算能力时，这在web中是不好的基调。