javascript code not executing in order
<p>So I'm trying to fetch data from a server in json format.</p>

<p>with this code </p>

<pre><code>for (var i = 0; i &lt; 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");
        }
    });
}
</code></pre>

<p>followed by this code block</p>

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

<p>problem is, my console will show "done" then "added data" and my webpage will be blank.</p>

<p>I've tried putting the first section in a function and trying to get my code to wait for the function to finish executing but to no avail.</p>

<p>anyway I can make this code execute in order/have the second block wait on the first block</p>