CODEWITHSUNDEEP
javascriptasynchronous
Michael Broschat
Michael Broschat

Reputation: 875

why is my array "undefined?"

In the primary application on which I have been working, and with which Stack Overflow gurus have been lifesavers, I decided to avoid some of the asynchronous complications I've seen, by splitting the SortArray branch of my main routine off into its own function. Testing that shows perfect results just before the function returns those results.

The way this saves me some processing is that I can sort the array before I send it into the main processing function. That way, all arrays are treated identically throughout the ProcessArray function.

In the code example below, I show the current structure, which is my interpretation of advice given (most recently by jfriend00). I make two $.getJSON calls, the second within the success clause of the first, and just before I end that first getJSON call (at which point I have tested and validated the arrays created during the processing not shown here), I call SortArray on one of the arrays, then pass it to the routine that sends the result into ProcessArray.

Despite the success of the SortArray code within itself, the array that enters ProcessArray by this means is noted as "undefined." If this isn't more problems with asynchronous processing, I presume it is a problem with array reference. But I don't know how to solve it.

function buildTree(centralID) {
  $(document).ready(function(){
    $.getJSON('MurakiMaida.json', function(data) {
        $.each(data.person, function(i, xdata) {
        ...create a small set of arrays
        }); //end of first $.each() routine
        $.getJSON('MurakiMaida.json', function(data) {
            $.each(data.person, function(i, xdata) {
            ...use an array just created to create another
            }); //end of second each()
        }); //end of second getJSON
        $("#spchildren").html(ProcessArray(SortArray(childIDs, true), centralID, false));
    }); //end of first getJSON
}); //document.ready
}

Upvotes: 0

Views: 162

Answers (1)

Larry K
Larry K

Reputation: 49114

If I'm understanding your code correctly (a big if), it's a problem with asynch processing. Your second Ajax call's results func is creating the "child" array, right?

But the Ajax call's results func isn't called until later. You're calling the ProcessArray function right away.

added Maybe this will help:

Your code (if I understand it right) is the exact same as the following except that I'm naming the functions rather than defining them inline:

var async_function_1 = function(data) {
   $.each(data.person, function(i, xdata) {
   ...create a small set of arrays
   }); //end of first $.each() routine

   $.getJSON('MurakiMaida.json', async_function_2);

   $("#spchildren").html(ProcessArray(SortArray(childIDs, true), centralID, false));
   // See the problem? You are calling ProcessArray before async_function_2
   // has a chance to run. 
} 

var async_function_2 = function(data) {
   $.each(data.person, function(i, xdata) {
   ...use an array just created to create another
   }); //end of second each()
};

function buildTree(centralID) {
    $(document).ready(function(){
        $.getJSON('MurakiMaida.json', async_function_1);
}); //document.ready
}

Fix Move the ProcessArray code into the end of the second async function definition as follows:

# Same as above except

var async_function_1 = function(data) {
   $.each(data.person, function(i, xdata) {
   ...create a small set of arrays
   }); //end of first $.each() routine

   $.getJSON('MurakiMaida.json', async_function_2);
} 

var async_function_2 = function(data) {
   $.each(data.person, function(i, xdata) {
   ...use an array just created to create another
   }); //end of second each()
   $("#spchildren").html(ProcessArray(SortArray(childIDs, true), centralID, false));
};

Upvotes: 1

Related Questions