getJSON running priority

Question

Я пытаюсь получить некоторые данные с сервера, который находится в формате JSON. Я хочу показать их в динамически созданной таблице. Когда я запускаю этот код, ошибок не возникает, а также он получает данные правильно, но ничего не показывает в таблице. Я думаю, что есть проблема с приоритетом, но я не знаю, как это исправить.

$.getJSON(getUrlPizza, function(result) { 
    keepGetData = result; 
    var j, k = 0; 
    $.each(keepGetData, function(i, field) { 
     getUrlSize = urlSize + "/" + keepGetData[i].id; 
     $.getJSON(getUrlSize, function(resultS) { 
      size = resultS; 
      $.each(size, function(s, fieldS) { 
       sizes[k] = size[s]; 
       console.log(sizes[k]); 
       k++; 
       /////// 
       ////// Create Table 
       ///// 
       out += "<tr><td>" + 
        keepGetData[i].name + 
        "</td><td>" + 
        fieldS.size1.name + 
        "</td><td>" + 
        fieldS.price + 
        "</td><td>" + 
        "<button onclick='edit(this)'>Edit</button></td><td>" + 
        "<button onclick='removeItem(this)'>Remove</button></td></tr>"; 
       ////// 
       ///// 
       //// 
      }); 
     }); 
    }); 
    out += "</table>"; 
    document.getElementById("drinkConDiv").innerHTML = out; 
    $("#add").show(); 
    $("#back").show(); 
}); 

Answer 1

TRY: вы выполняете asinc вызова вам необходимо добавить код HTML, когда вызов завершен

$.getJSON(getUrlPizza, function(result){ 
     keepGetData = result; 
     var j,k =0; 
     $.each(keepGetData, function(i,field){ 
     getUrlSize = urlSize + "/" + keepGetData[i].id; 
     $.getJSON(getUrlSize, function(resultS){ 
      size = resultS; 
      $.each(size, function(s,fieldS){ 
       sizes[k] = size[s]; 
       console.log(sizes[k]); 
       k++; 
       /////// 
       ////// Create Table 
       ///// 
       out += "<tr><td>"+ keepGetData[i].name + "</td><td>"+ 
         fieldS.size1.name + "</td><td>"+ 
         fieldS.price + "</td><td>"+ 
         "<button onclick='edit(this)'>Edit</button></td><td>"+ 
         "<button onclick='removeItem(this)'>Remove</button></td></tr>"; 

         $"#drinkConDiv").html("<table>"+out+"</table>"); 
         $("#add,#back").show(); 

       ////// 
       ///// 
       //// 
      }); 
     }); 
     }); 

    });