解析HTML表的JSON对象

Question

我试图显示基于JSON数据的"排行榜"表.

我已经阅读了很多关于JSON格式并克服了一些初步障碍,但我的Javascript知识非常有限,我需要帮助!

基本上我的JSON数据看起来像这样:

[{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}]

我需要的是能够遍历这个数组,为每个对象生成一个表行或列表项.数组中将有未知数量的总对象,但每个对象具有相同的格式 - 三个值:Name,Score,Team.

到目前为止,我使用了以下代码,确认我已成功加载控制台中的对象 -

$.getJSON(url,
function(data){
  console.log(data);
});

但我不知道如何迭代它们,将它们解析为HTML表格.

下一步是按降序按分数对条目进行排序...

任何帮助将非常感激.谢谢!

编辑:

下面更新了代码,这有效:

$.getJSON(url,
function (data) {
    var tr;
    for (var i = 0; i < data.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + data[i].User_Name + "</td>");
        tr.append("<td>" + data[i].score + "</td>");
        tr.append("<td>" + data[i].team + "</td>");
        $('table').append(tr);
    }
});

($ .parseJSON不是必需的,我们可以使用'data',因为我已经解析了JSON数组)

Answer 1

循环遍历每个对象,每次迭代附加一个包含相关数据的表行.

$(document).ready(function () {
    $.getJSON(url,
    function (json) {
        var tr;
        for (var i = 0; i < json.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + json[i].User_Name + "</td>");
            tr.append("<td>" + json[i].score + "</td>");
            tr.append("<td>" + json[i].team + "</td>");
            $('table').append(tr);
        }
    });
});

的jsfiddle

Answer 2

您可以使用简单的jQuery jPut插件

http://plugins.jquery.com/jput/

<script>
$(document).ready(function(){

var json = [{"name": "name1","score":"30"},{"name": "name2","score":"50"}];
//while running this code the template will be appended in your div with json data
$("#tbody").jPut({
    jsonData:json,
    //ajax_url:"youfile.json",  if you want to call from a json file
    name:"tbody_template",
});

});
</script>   

<div jput="tbody_template">
 <tr>
  <td>{{name}}</td>
  <td>{{score}}</td>
 </tr>
</div>

<table>
 <tbody id="tbody">
 </tbody>
</table>

Answer 3

遍历每个对象,推入字符串数组并加入它们.附加在目标表中,它更好.

$(document).ready(function () {
$.getJSON(url,
function (json) {
    var tr=[];
    for (var i = 0; i < json.length; i++) {
        tr.push('<tr>');
        tr.push("<td>" + json[i].User_Name + "</td>");
        tr.push("<td>" + json[i].score + "</td>");
        tr.push("<td>" + json[i].team + "</td>");
        tr.push('</tr>');
    }
    $('table').append($(tr.join('')));
});