解析HTML表的JSON对象

小编典典

解析HTML表的JSON对象

json

我试图显示基于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"}]

我需要的是能够遍历此数组，为每个对象生成一个表行或列表项。数组中的对象总数未知，但是每个对象具有相同的格式-三个值：名称，得分，团队。

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

$.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不是必需的，我们可以使用“数据”，因为我相信JSON数组已经被解析）

阅读 317

2020-07-27

共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

2020-07-27