Javascript - 使用变量获取一个数组

时间:2013-08-24 03:17:02

标签: javascript arrays json loops cgi

我目前正在开发一个连接到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。如何让它循环直到它击中最后一个对象?

1 个答案:

答案 0 :(得分:1)

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

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

前段时间我们得到了Array.forEach,只要你不必支持旧版本的IE就可以正常工作(你也可以填充它们):

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);
});

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