Question

I have an application that uses several instances of getJSON, and I’m getting into lots of trouble. Pointy once suggested reworking the main routine to include asynchronous processing, and I’m agreeing (now that I understand something of this).

Before attempting to rework this, it was structured like this:

Fill some arrays;
Call processArray to create a set of strings for each;
Stick the strings into the DIVs.

In the processArray routine, I call $.getJSON–a couple times, and you folks have pointed out that I’m getting into trouble with expecting values I have no right to expect. The overall routine processes an array into a complex string, but some arrays have to be sorted (unconventionally) first. My original structure began by asking: is this an array to be sorted? If so, I did such and such, involving getJSON, then returned to the main routine. What I had done to the array did not make it over the main routine, which continued to see the original array contents.

So, that processArray was configured like so:

 function processArray(arWorking, boolToSort...) {
if(boolToSort) {do special stuff}
//continue on with processing
return complexString;
} 

I figured that I would try to guarantee the inclusion of the sorted array in the main routine by replacing the ‘arWorking’ argument with a function that did the sorting if processArray was called with boolToSort = true. In my thinking, the rest of the main routine would go on with one of two forms of array: the original as passed or the sorted array. To this end, I made the sorting routine a separate routine: SortArray(arrayToUse).

I came up with this:

function processArray( function(arWorking) {if(boolToSort) SortArray(arWorking); else return arWorking;}, boolToSort, ...) {
//main routine
return complexString;
}

Both FireFox and IE9 object. FF breaks to jQuery, while IE9 wants an identifier in the calling arguments.
What looks to be wrong? Can I use boolToSort in my “argument function?”

Answer 1

The first part of you understanding this is this:

$.getJSON() does it’s work asynchronously. That means that when you call it, all it does is start the operation. The code following that function continues to execute while the $.getJSON() call works in the background. Some time later, the JSON results will be available and the success handler will get called.

ONLY in the success handler can you use those results.

As such, you cannot write normal procedural code that does this:

function processArray() {
    $.getJSON(url, function(data) {
        // only in here can you process the data returns from the getJSON call
    })
    // you cannot use the JSON data here as it is not yet available
    // you cannot return any of the JSON data from the processArray function

}

Instead, you must write code that uses the success handler. Here’s one way of doing that:

function processArrays(urlToProcess1, urlToProcess2, callbackWhenDone) {
    $.getJSON(urlToProcess1, function(data) {
        // only in here can you process the data returns from the getJSON call
        // do whatever you want to do with the JSON data here
        // when you are done process it, you can then make your next getJSON call
        $.getJSON(urlToProcess2, function(data) {
            // do whatever you want to do with the JSON data here
            // when done, you can then call your callback function to continue on with other work
            callbackWhenDone();
        });
    });
}

Another thing you cannot do is this:

function processArray() {
    var result;
    $.getJSON(url, function(data) {
        // only in here can you process the data returns from the getJSON call
        result = data;
    })
    return(result);
}

var data = processArray();
// code that uses data

You cannot do this because the result data is not available when processArray() returns. That means not only can you not use it inside of processArray (but outside the success handler), but you cannot return it from processArray() and you cannot use it in code written after processArray(). You can only use that data from within the success handler or in code called from the success handler.

If you had a whole bunch of URLs to process and you used the same code on each one, you could pass an array of URLs and loop through them, starting the next getJSON call only when the success handler of the first was called.

If you had a whole bunch of URLs each with different code, you could pass an array of URLs and an array of callback functions (one for each URL).

FYI, I see no issue with passing boolToSort. It sounds to me like the issue is with how you handle asynchronous ajax calls.

For completeness, it is possible use synchronous ajax calls, but that is NOT recommended because it’s a bad user experience. It locks up the browser for the duration of the networking operations which is generally not a good thing. It’s much better to use the normal asynchronous ajax calls and structure your code to work properly with them.