Получение JSON в цикле не извлекает все элементы в JQuery

Question

Я пытаюсь получить элементы из моего JSON API, как в примере ниже. Дело в том, что оно не работает должным образом. Я получаю только значения от One Hub вместо всех из них.

/api/hubsUser /: id - возвращает JSON со всеми моими концентраторами и /api/sensorsHub /: id - возвращает JSON со всеми моими датчиками, имеющими элемент hubID.

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, асинхронная конечно, и не ждать их, чтобы выполнить перед вызовом $('#sensorList table tbody').html(wholeContent);. Странно, что вы даже получите этот, возможно, потому, что вы еще на локальном хосте.

Вы должны позвонить $('#sensorList table tbody').html(wholeContent) после того, как все ваши обратные вызовы ajax возвращаются. Я думаю, что маршрут, который следует использовать, - использовать jQuery when вариант (see here) или «обещания».

Другое, что вы, вероятно, имели в виду, это использовать var tableContent = '' в каждом вторичном ajax, вместо того чтобы объявлять его один раз в начале. В противном случае он будет содержать результаты предыдущих вызовов ajax, и один и тот же контент будет добавлен к wholeContent несколько раз.

Answer 2

Попробуйте добавить .bind(this) к вашим $.each петли:

$.each(result.data, function() { 
    //alert(this.hubID); 
    hubList.push(this.hubID); 
}.bind(this)); // <- force the loop to use the object context of your choice