javascript - 从这个 JSON 结果写入这个 HTML（解析 JSON）

Question

我有这个 JSON 结果：

{
    "html_content": [
        [
            [
                "Navegantes",
                "11",
                "8",
                "3",
                "0"
            ]
        ],
        [
            [
                "Tigres",
                "11",
                "8",
                "3",
                "0"
            ]
        ],
        [
            [
                "Caribes",
                "11",
                "6",
                "5",
                "2"
            ]
        ],
        [
            [
                "Leones",
                "11",
                "6",
                "5",
                "2"
            ]
        ],
        [
            [
                "Aguilas",
                "11",
                "5",
                "6",
                "3"
            ]
        ],
        [
            [
                "Tiburones",
                "10",
                "4",
                "6",
                "3.5"
            ]
        ],
        [
            [
                "Cardenales",
                "10",
                "3",
                "7",
                "4.5"
            ]
        ],
        [
            [
                "Bravos",
                "11",
                "3",
                "8",
                "5"
            ]
        ]
    ]
}

我需要为每个这样的 HTML 标记构建：

<tr>
    <td>Navegantes</td>
    <td>11</td>
    <td>8</td>
    <td>3</td>
    <td>0</td>
    <td>
        <span class="glyphicon glyphicon-play"></span>
        <span class="glyphicon glyphicon-stop"></span>
    </td>
</tr>
<tr>
    <td>Tigres</td>
    <td>11</td>
    <td>8</td>
    <td>3</td>
    <td>0</td>
    <td>
        <span class="glyphicon glyphicon-play"></span>
        <span class="glyphicon glyphicon-stop"></span>
    </td>
</tr>

依此类推，我编写了以下代码：

$.each(data.html_content, function(i, v) {
    htm += "here goes the HTML code";
});

但这不起作用我认为由于数组类型，有什么帮助吗？

Answer 1

像这样的东西：

for (var i = 0; i < data.html_content.length; i++) {
   var tr = "<tr>";
   var td = "";
   for (var j = 0; j < data.html_content[i][0].length; j++) {
       td += "<td>" + data.html_content[i][0][j] + "</td>"; 
   }
   tr += td + "<td><span></span><span></span></td></tr>";
   $("table").append(tr);
}

Answer 2

你可以尝试这样的事情（一个例子。）

var table = $('<table/>')
$.each(data.html_content, function(k, v){
    var tr = $('<tr/>');
    $.each(v[0], function(i, j){
        $('<td/>', { 'text':j }).appendTo(tr);
    });
    var sp1 = $('<span/>', { 'class':'glyphicon glyphicon-play', 'text':'Play' });
    var sp2 = $('<span/>', { 'class':'glyphicon glyphicon-stop', 'text':'Stop' });
    var tdSpan = $('<td/>');
    tdSpan.append(sp1).append(sp2);
    tr.append(tdSpan);
    table.append(tr);
});
$('body').append(table);

Answer 3

这是一个从头开始的基本解决方案：

$.each(data.html_content, function(i, v) {
    htm += '<tr>' +
        '    <td>' + i[0][0] + '</td>' +
        '    <td>' + i[0][1] + '</td>' +
        '    <td>' + i[0][2] + '</td>' +
        '    <td>' + i[0][3] + '</td>' +
        '    <td>' + i[0][4] + '</td>' +
        '    <td>' +
        '        <span class="glyphicon glyphicon-play"></span>' +
        '        <span class="glyphicon glyphicon-stop"></span>' +
        '    </td>' +
        '</tr>';
});

Answer 4

您可以从头开始编写它，但是有很多可用的JS 模板脚本可以使用 JSON。

请参阅：http ://coding.smashingmagazine.com/2012/12/05/client-side-templating/了解它们的工作原理。