一尘不染

解析HTML表的JSON对象

javascript

我试图显示基于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数组已经被解析)


阅读 374

收藏
2020-04-25

共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);
        }
    });
});
2020-04-25