JSON到HTML表

因此，在我開始之前，我想說我只知道基本的HTML和CSS。既然這樣，我在http://eu.bitswit.ch/api/server_leaderboard.php?server=71有一個JSON輸出，我想把它放到HTML表格中。我在Google/Youtube上瀏覽過，但沒有一篇深入到足以幫助我。JSON到HTML表

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

來源

2013-08-22 user2705720

請提供您的JSON（或短，足夠的例子）到問題本身。 – Vulcan

堆棧溢出就像一個圖書館爲未來的訪客。這就是代碼需要提出問題的原因。要做到這一點，點擊編輯，然後複製/粘貼。除非是某人的版權數據，否則不要這樣做。謝謝。 – Paul

點擊編輯，而不是評論。 – Paul

我會用這樣的事情（你需要的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＃代碼或其他任何東西中進行處理，然後顯示渲染表。當網頁加載速度取決於客戶端的計算能力時，它在網絡中很糟糕。從問題的URL

來源

2013-08-22 03:36:00

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;

來源

2013-08-22 03:57:35

回答

相關問題