Erfolgreiche Auffüllung einer HTML-Tabelle mit mehreren Ajaxaufrufen

Question

Ich verwende einen Ajax API-Aufruf, um eine HTML-Tabelle zu füllen. Die erste Spalte der Tabelle ist ein the (item.name) und ich verschachtelte einen zweiten Ajax-Aufruf, um die zweite Spalte mit einem Datum zu füllen (als Nebenseitel wird das Datum in Mikrosekunden seit der Epoche zurückgegeben ... Ich werde weiterarbeiten Formatieren Sie dies später). Der Grund für die Verschachtelung liegt darin, dass der zweite Aufruf einen Teil der Ergebnisse des ersten Aufrufs in der URL verwendet. Hier ist der Code:

HTML

<div id="output"> 
    <table id="scalaapi"> 
    <tbody> 
    <tr><td></td><td class="uuid"></td></tr> 
    </tbody> 
    </table> 
</div> 

AJAX

$.ajax({ 
type: 'GET', 
url: "https://avacmd25.scala.com:44335/ContentManager/api/rest/players?offset=0&sort=name&filters=%7BplayerStatus%20:%20%7Bvalues:%5B'HEARTBEAT_OVERDUE'%5D,%20comparator%20:%20'eq'%7D%7D", 
dataType: "json", 
success: function(data) { 
var list = data.list; 
$.each(list, function(i, item) { 
var tr = $('<tr>').append('<td>' + (item.name) + '</td>' + '<td>'+ 
    $.ajax({ 
    type: 'GET', 
    url: "https://avacmd25.scala.com:44335/ContentManager/api/rest/heartbeats/sequence/"+(item.uuid), 
    dataType: "text", 
    crossDomain: true, 
    success: $.each(function(results) { 
       $('.uuid').text(results); 
      }) 
    }) 
    + '</td>'); 
$("#scalaapi").append(tr); 
}); 
} 
}) 

Ich bin ein gemischtes Ergebnis zu erzielen ... Der erste API-Aufruf funktioniert wie erwartet, obwohl es die erste Zeile überspringt . Der zweite API-Aufruf nur den ersten Datensatz zurückkehrt und es ist nicht die erste Zeile übersprungen und die nachfolgenden Zeilen zeigen [object Object]

Screenshot von resuts -

Answer 1

Sie tun viel in Ihrem Code, wo Sie sofort Dinge tun, ohne darauf warten zu müssen, dass AJAX-Aufrufe zuerst abgeschlossen werden. Versuchen Sie Ihr Javascript Umstrukturierung ein wenig mehr, geduldig zu sein (unten ist Pseudo-Code, wo ich ausgezogen habe die meisten der zusätzlichen AJAX Konfigurations Sachen aus, um hoffentlich deutlicher zu machen, was der Code tut):

$.ajax({..., success: function(data) { 
    // when we get here the first AJAX call has returned 

    // loop through each item in the response from the first AJAX call 
    $.each(data.list, function(i, item) { 
     // append the <tr> to the table with the information we have for the item and a placeholder for the second cell 
     var tr = $('<tr><td>'+item.name+'</td><td class="uuid">...</td></tr>').appendTo('#scalaapi'); 

     // make the second AJAX call for this item 
     $.ajax({ 
      url:".../sequence/"+item.uuid, 
      ..., 
      success: function(result) { 
       // we now have the contents we need for the second <td>, so insert it 
       tr.find('.uuid').text(result); 
      } 
     }); 
    }); 
}); 

Ich glaube, dass Wille Dich näher an das heranbringen, was Du versuchst?