解析 HTML 表的 JSON 对象

IT技术 javascript jquery html arrays json
2021-02-03 05:38:28

我正在尝试基于 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 数组已经被解析）

6个回答

循环遍历每个对象，在每次迭代时附加一个带有相关数据的表行。

$(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

如何为新数据刷新 td？
2021-03-18 05:38:28
再次感谢 - 当我输入 url 并运行脚本时，我现在在错误控制台中收到“语法错误：JSON 解析错误：意外的标识符“对象”？
2021-03-23 05:38:28
非常感谢您的快速回复——这绝对让我走上了正轨。但是，当我用 $.getJSON(url) 替换 json 变量的值时，它似乎没有解析数组，控制台只是返回整个对象...
2021-03-24 05:38:28
@pmandell 我正在使用您在 Fiddle 中提供的代码。但是我只得到表头，没有数据或表。
2021-04-02 05:38:28
脚本注入漏洞。
2021-04-08 05:38:28

您可以使用简单的 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>

循环遍历每个对象，推入字符串数组并加入它们。附加在目标表中，效果更好。

$(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('')));
});

您可以将KnockoutJS与 jQuery 一起使用。KnockoutJS 具有智能数据绑定功能。通过使用 foreach 绑定功能，您可以编写如下示例的代码：

HTML：

<table>
    <thead>
        <tr>
            <th>User Name</th>
            <th>Score</th>
            <th>Team</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: teams">
        <tr>
            <td data-bind="text: User_Name"></td>
            <td data-bind="text: score "></td>
            <td data-bind="text: team "></td>
        </tr>
    </tbody>
</table>

JavaScript：

$(document).ready(function () {
        $.getJSON(url,function (json) {
               ko.applyBindings({
                  teams: json
               });
          }
        });

    });

使用您的虚拟数据进行Fiddle Demo

通过扩展 $ 从对象的 JSON 数组创建 HTML 表，如下所示 

$.makeTable = function (mydata) {
            var table = $('<table border=1>');
            var tblHeader = "<tr>";
            for (var k in mydata[0]) tblHeader += "<th>" + k + "</th>";
            tblHeader += "</tr>";
            $(tblHeader).appendTo(table);
            $.each(mydata, function (index, value) {
                var TableRow = "<tr>";
                $.each(value, function (key, val) {
                    TableRow += "<td>" + val + "</td>";
                });
                TableRow += "</tr>";
                $(table).append(TableRow);
            });
            return ($(table));
        };

并使用如下：

var mydata = eval(jdata);
var table = $.makeTable(mydata);
$(table).appendTo("#TableCont");

其中 TableCont 是一些 div

其它你可能感兴趣的问题
上一篇如何在javascript中重载函数？ 下一篇使用 JavaScript 确定一个月中的天数的最佳方法是什么？