JavaScript-Code nicht in der Reihenfolge

Question

So versuche ich, Daten von einem Server im JSON-Format zu holen.

mit diesem Code

for (var i = 0; i < hosts.length; i++) { 
    var tempUrl = url + hosts[i]; 
    jQuery.ajax({ 
     type : "GET", 
     dataType : "json", 
     username : "user", 
     password : "password", 
     url : url, 
     async : true, 
     success : function (data) { 
      //var obj = data.data.host.status; 
      //console.log(obj); 
      jsonHosts.push(data.data); 
      console.log("added data"); 
     } 
    }); 
} 

von diesem Codeblock gefolgt

for (var i = 0; i < jsonHosts.length; i++) { 
      console.log("dog"); 
      console.log(jsonHosts[i].host.status); 
      document.getElementById('test').innerHTML += "<br>" + jsonHosts[i].host.status; 
      document.getElementById('test').innerHTML += '<br>Some new content!'; 
     } 
     console.log("done"); 

Problem ist, wird meine Konsole zeigen "fertig" und dann "hinzugefügten Daten" und meine Webseite wird leer sein.

Ich habe versucht, den ersten Abschnitt in eine Funktion zu setzen und zu versuchen, meinen Code auf die Ausführung der Funktion warten zu lassen, aber ohne Erfolg.

trotzdem kann ich diesen Code machen, um/haben den zweiten Block Warten auf den ersten Block auszuführen

Answer 1

Verschieben unten Teil des Codes in Erfolg Callback-Funktion

success : function (data) { 
    //var obj = data.data.host.status; 
    //console.log(obj); 
    jsonHosts.push(data.data); 
    for (var i = 0; i < jsonHosts.length; i++) { 
     console.log("dog"); 
     console.log(jsonHosts[i].host.status); 
     document.getElementById('test').innerHTML += "<br>" +  jsonHosts[i].host.status; 
     document.getElementById('test').innerHTML += '<br>Some new content!'; 
    } 
    console.log("done"); 
} 

Answer 2

Die Ajax ist async so die Erfolgsfunktion nach der Schleife läuft. versuchen Sie dies:

for (var i = 0; i < hosts.length; i++) { 
     var tempUrl = url + hosts[i]; 
     jQuery.ajax({ 
      type : "GET", 
      dataType : "json", 
      username : "user", 
      password : "password", 
      url : url, 
      async : true, 
      success : function (data) { 
       //var obj = data.data.host.status; 
       //console.log(obj); 

      console.log("done"); 
       jsonHosts.push(data.data); 
       console.log("added data"); 
       DataCame(jsonHosts); 
      } 
     }); 
    } 

function DataCame(jsonHosts){ 
for (var i = 0; i < jsonHosts.length; i++) { 
        console.log("dog"); 
        console.log(jsonHosts[i].host.status); 
        document.getElementById('test').innerHTML += "<br>" + jsonHosts[i].host.status; 
        document.getElementById('test').innerHTML += '<br>Some new content!'; 
       } 
}