javascript code not executing in order

Question

So I'm trying to fetch data from a server in json format.

with this 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");
        }
    });
}

followed by this code block

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 is, my console will show "done" then "added data" and my webpage will be blank.

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.

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

This is the whole point of a callback. The "success" function is called when the AJAX request is complete. That's where you need to put any code which depends on the request being done. You can point it at another function if it makes it easier to manage. — moopet, Jul 20 '16 at 12:33
Asynchronous calls... What you have done is ordered a pizza online. As soon as you push submit you try to eat that pizza that has not been delivered to your house. — epascarello, Jul 20 '16 at 12:33
Disabling Async fixed the issue. I'm new to web dev, so I was not aware of this particular. thank you for your help — Space Bear, Jul 20 '16 at 12:53
The correct answer would be to use promises to wait til all of the Ajax calls are complete and than output. OR you just process them as they come in. — epascarello, Jul 20 '16 at 12:56
Performance isn't a huge issue here, I might just use python as a chron job ot make a local database — Space Bear, Jul 20 '16 at 13:29

score 1 · Accepted Answer · answered Jul 20 '16 at 12:35

1

Move below portion of code into success callback function

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");
}

answered Jul 20 '16 at 12:35

Mr.7

2,292
1
20
33

check the answer again – Ashkan Mobayen Khiabani Jul 20 '16 at 12:41
And the data would be duplicated on every Ajax call, First Ajax call you append to the array and loop. Second one you append and loop so that means it will add the first item again. How this is the selected answer.... – epascarello Jul 20 '16 at 12:54

Ashkan Mobayen Khiabani · Answer 2 · 2016-07-20T12:41:46.790

The ajax is async so the success function runs after your loop. try this:

   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!';
                }
}

OK while this *works* for my code snipped above, I really want to have an array I can work with, because this is a demo case and plan to fetch the data, do some processing and then print it out, this way I can only work on the data as it comes in. — Space Bear, Jul 20 '16 at 12:38

javascript code not executing in order

2 Answers2