Javascript - 使用变量获取数组的一部分

Question

我目前正在开发一个连接到 CGI 后端的网页。到目前为止，CGI 后端运行良好，但我不太了解 JavaScript，所以我很难从 AJAX JSON 请求中获取结果。

我有什么：

JavaScript 函数查询 CGI。

CGI 在 JSON 数组中响应。

    {
    "ARRAY": [
        {
            "line": "1",
            "numbers": "12321",
            "var": "12321",
            "var2": "12321"
        },
        {
            "line": "2",
            "numbers": "-1",
            "var": "12320",
            "var2": "6160"
        }
    ]
}

line、numbers、var 和 var2 都必须放在表格的不同单元格中。

<table>
<tr>
<th>line</th><th>numbers</th><th>var</th><th>var2</th>
</tr>
<tr>
<td>ARRAY[0].line</td><td>ARRAY[0].numbers</td><td>ARRAY[0].var</td><td>ARRAY[0].var2</td>
</tr>
<tr>
<td>ARRAY[1].line</td><td>ARRAY[1].numbers</td><td>ARRAY[1].var</td><td>ARRAY[1].var2</td>
</tr>
</table>

所以，这是我的问题：

我永远不知道数组中有多少对象。这里有 2 个，但有时可能有 20 个。如果需要，我可以修改我的 JSON。我如何让它循环直到它碰到最后一个对象？

Answer 1

有几种不同的方法。传统的方法是使用简单的 for 循环：

for (var i = 0, len = ARRAY.length; i < len; i++) {
    //Build table row using ARRAY[i].line, etc
}

不久前我们得到了 Array.forEach，只要您不必支持旧版本的 IE 就可以正常工作（您也可以对其进行 polyfill）：

ARRAY.forEach (function (idx, elt) {
    //Build table row using elt.line, etc
});

如果你使用 jQuery，还有 $.each:

$.each(ARRAY, function (idx, elt) {
    //Build table row using elt.line, etc
});

这是一个更完整的示例，说明您需要什么，使用 jQuery 库（不是必需的，但可以让事情变得更简单）：

var url = '/cgi-bin/your_script_name.cgi';
var html = '<table><tr><th>line</th><th>numbers</th><th>var</th><th>var2</th></tr>';
$.get(url, function (response) {
    $.each(response.ARRAY, function (idx, elt) {
        html += '<tr><td>' + elt.line + '</td><td>' + elt.numbers + '</td><td>' + elt.var + '</td><td>' + elt.var2 + '</td></tr>';
    });
    html += '</table>';
    $('#target-element').html(html);
});

在本例中，您将表格放入 id 为 target-element 的元素中，并且您的 cgi 脚本位于 /cgi-bin/your_script_name.cgi。如果不能使用 jQuery，则需要手动创建 XMLHttpRequest，将其 responseType 设置为 'json'，并将函数绑定到 onload（或者如果支持旧浏览器，则 onreadystatechange 然后检查readyState === 4)。希望对您有所帮助。