javascript - 在循环中获取 JSON 不会获取 JQuery 中的所有元素

Question

我正在尝试从 JSON API 获取元素，如下例所示。 问题是它不能正常工作。我仅从一个集线器获取值，而不是从所有集线器获取值。

/api/hubsUser/:id - 返回 JSON 以及我所有的集线器 /api/sensorsHub/:id - 返回带有 hubID 元素的所有传感器的 JSON。

var tableContent = '';
var wholeContent = '';
var hubList = [];

$.getJSON('/api/hubsUser/' + document.getElementById("txt").innerHTML, function (result) {

    $.each(result.data, function () {
        //alert(this.hubID);
        hubList.push(this.hubID);
    });

    $.each(hubList, function (i, hub) {
        // alert(hub);
        $.getJSON('/api/sensorsHub/' + hub, function (data) {

            $.each(data.data, function () {
                //alert(this.sensorID);
                tableContent += '<tr>';
                tableContent += '<td><a href="#" class="linkshowuser" rel="' + this.sensorID + '">' + this.sensorID + '</a></td>';
                tableContent += '<td><a href="#" class="linkshowuser" rel="' + this.hubID + '">' + this.hubID + '</a></td>';
                tableContent += '<td><a href="#" class="linkshowuser" rel="' + this.desc + '">' + this.desc + '</a></td>';
                tableContent += '<td><a href="#" class="linkshowuser" rel="' + this.state + '">' + this.state + '</a></td>';
                tableContent += '</tr>';
            });
            wholeContent += tableContent;

        });
    });
    $('#sensorList table tbody').html(wholeContent);
});
};

Answer 1

这是因为在第一个 ajax 成功后，您会进行许多其他 ajax 调用，当然是异步的，并且您不会等待它们执行后再调用 $('#sensorList table tbody').html(整个内容)；。奇怪的是你竟然得到了这个，可能是因为你还在本地主机上。

您应该在所有 ajax 调用返回结果后调用 $('#sensorList table tbody').html(wholeContent) 。我认为遵循的路线是使用 jQuery when 选项 ( see here ) 或 'promises'。

您可能想到的另一件事是在每个辅助 ajax 中使用 var tableContent = '' 而不是在开始时声明一次。否则它将包含先前 ajax 调用的结果，并且相同的内容将被多次添加到 wholeContent 中。