more struggles with asynchronous javascript

Question

My application seeks to: 1. populate some arrays (using a JSON file) 2. process array data before... 3. ...inserting processed array data in prepared DIVs

Currently, this is structured in a procedural way, but as Pointy pointed out (http://stackoverflow.com/questions/8377344/scope-of-javascript-array-differs-from-ie9-to-firefox-chrome/8377401#8377401), attempts to do so via some asynchronous programming. My current goal is to make it work in all browsers by making it properly asynchronous.

Although the application works fine in IE9, it fails in FF and Chrome. In the following main procedure, IE9 populates and retains all array content. FF, et al, populates then loses it.

//globally declare some arrays (used throughout the application)
function buildTree(id) {
    $(document).ready(function() {
        $.getJSON(JSONfile, function(data) {
            $.each(data.person, function(i, xdata) {
                //populate arrays with relevant data
            }); //end of first $.each()
            //check 1
        }); //end of first getJSON
        //check 2
        $.getJSON(JSONfile, function(data) {
            //check 3
            $.each(data.person, function(i, xdata) {
                //populate arrays with relevant data, using arrays from first read
            }); //end of second $.each()
            //check 4
        }); //end of second getJSON
        //check 5
        //check 6
    }); //end of document.ready
}

Arrays are fine: check 1, 3, 4, 6 Arrays are empty: check 2, 5

To add perplexity to my misery, I decided to just dump the arrays into the DIVs without processing. I accidentally left an alert in (=check5). Although it still shows the arrays to be empty, when the next lines execute (dumping the arrays into the DIVs), everything is fine. Comment out the alert: nothing anymore.

See anything obviously wrong?

Answer 1

This was a deceptive question. Yes, it does have an asynchronous situation (that needs correcting) but the real question was: why don't I see anything in FF's alert statements? At the moment, I don't care, because even though FireFox doesn't show anything in the alerts, it passes the contents just fine to the next routine, and that's where we'll take up the next problem.

Answer 2

The problem in your code is that both AJAX requests are sent immediately and nothing guarantees that the first one will return before the second.

You can work aroung this by

1. Sending the second AJAX request only after the first one is done

   $.getJSON(..., function(data1){
       $.getJSON(..., function(data2){
       });
   });
   

2. Explicitely taking allowing for either request to come first

   //I don't know if there is a function to do this kind of sync
   // built-in jQuery already. In Dojo I'd use a DeferredList...
   
   var requests_to_go = 2;
   var args = [];
   
   function onHaveAllData(args){
       var data1 = args[0];
       var data2 = args[1];
       //populate second array
   }
   
   $.getJSON(..., function(data){
       requests_to_go -= 1;
       args[0] = data;
       if(request_to_go <= 0){ onHaveAllData(args); }
   });
   
   $.getJSON(..., function(data){
       requests_to_go -= 1;
       args[1] = data;
       if(request_to_go <= 0){ onHaveAllData(args); }
   });
   

Answer 3

You have a few choices.

1. Do the second JSON Ajax call in the success function of the first one. ("check 1")
2. Use jQuery's .when/.then to stack them up.
3. Do more work server-side and avoid doing it all Ajaxy.
4. Make them synchronous (ew, don't).