解析HTML表的JSON对象

Question

解析HTML表的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"}]

我需要的是能够遍历这个数组，为每个对象生成一个表行或列表项。数组中将有未知数量的总对象，但每个对象具有相同的格式 - 三个值：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&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$.getJSON(url, &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;(json)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;tr; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;json.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tr&nbsp;=&nbsp;$('<tr/>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tr.append("<td>"&nbsp;+&nbsp;json[i].User_Name&nbsp;+&nbsp;"</td>"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tr.append("<td>"&nbsp;+&nbsp;json[i].score&nbsp;+&nbsp;"</td>"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tr.append("<td>"&nbsp;+&nbsp;json[i].team&nbsp;+&nbsp;"</td>"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('table').append(tr); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;});});的jsfiddle

Answer 2

遍历每个对象，推入字符串数组并加入它们。附加在目标表中，它更好。$(document).ready(function&nbsp;()&nbsp;{$.getJSON(url,function&nbsp;(json)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;tr=[]; &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;json.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tr.push('<tr>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tr.push("<td>"&nbsp;+&nbsp;json[i].User_Name&nbsp;+&nbsp;"</td>"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tr.push("<td>"&nbsp;+&nbsp;json[i].score&nbsp;+&nbsp;"</td>"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tr.push("<td>"&nbsp;+&nbsp;json[i].team&nbsp;+&nbsp;"</td>"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tr.push('</tr>'); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;$('table').append($(tr.join('')));});