JSON to HTML table

Question

Итак, прежде чем я начну, я хотел бы сказать, что я знаю только базовые HTML и CSS. Теперь, когда это не работает, у меня есть выход JSON на http://eu.bitswit.ch/api/server_leaderboard.php?server=71, и я хотел бы поместить его в таблицы 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

Я хотел бы использовать что-то вроде этого (вы должны 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# или что-то еще, а затем просто показать отображаемую таблицу. Плохой тон в сети, когда скорость загрузки страницы зависит от вычислительных возможностей клиента.

Answer 2

JSON пример из URL в вопросе: 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;