Данные JSON не корректно добавляются в таблицу с использованием JavaScript

Question

Я создаю таблицу, извлекая значения из разных URL-адресов JSON. Для первого JSONUrl (PoolsUrl) все работает нормально. Включение одной и той же таблицы с данными из второго JSON Url (RoundsUrl) не подходит. Исправленные данные возвращаются, но добавляются в последнюю строку таблицы (см. Рисунок ниже). RoundsUrl создается с использованием значений JSON из PoolsUrl.

Почему данные для столбца «Созданные раунды» добавлены в последнюю строку, как показано на рисунке ниже?

$(document).ready(function() { 
my_pools = {} 
$.getJSON(PoolsUrl, 
     function (json) { 
      my_pools = json; 
      createdRounds = {} 
      my_pools.createdRounds = { 
       "CreatedRounds": "none" 
      } //created this key and value to add number of rounds in the pool JSON properties. 
      var tr; 
      for (var i = 0; i < my_pools.length; i++) { 
       tr = $('<tr/>'); 
       tr.append("<td>" + my_pools[i].poolId + "</td>"); 
       tr.append("<td>" + my_pools[i].name + "</td>"); 
       tr.append("<td>" + my_pools[i].totTeams + "</td>"); 
       my_poolIdString = my_pools[i].poolId.toString() 
       RoundsUrl = url + my_poolIdString 
       $.getJSON(RoundsUrl, //output: {"1":"Round 1","2":"Round 2"} 
        function (json) { 
         my_roundsCreated = json; 
         my_roundsCount = Object.keys(my_roundsCreated).length 
         my_pools.createdRounds = my_roundsCount; 
         tr.append("<td>" + my_pools.createdRounds + "</td>") 
        }) 
       $('table').append(tr); 
       } 
      }) 
}); 

PoolsUrl и сами RoundsUrl остались здесь, но они работают должным образом. Возвращаются значения JSON.

Проблема может заключаться в том, что переменная 'my_pools.createdRounds' во второй функции $ .getJSON не относится к моему глобальному объекту my_pools.

таблицы вывода изображения:

Answer 1

Проблема заключается в том, что у вас есть асинхронный вызов. Переменная tr является общей и к моменту возврата вызова tr является другим элементом.

Переместить декларацию tr внутри цикла for.

var tr = $('<tr/>'); 

Answer 2

Я нашел ответ здесь: www.stackoverflow.com/a/15585054/4544184

нетрудоспособных Асинхронный с помощью $ .ajax.