CODEWITHSUNDEEP
javascriptjquery
Michael Broschat
Michael Broschat

Reputation: 875

scope of javascript array differs from IE9 to FireFox/Chrome

I've narrowed down my fundamental problem: the scope of an array differs from IE9 to FireFox (and Chrome).

In the following function (excerpt only), I declare an array, then fill it with a call to $.getJSON(). Because the line referencing HoldEm occurs within the ProcessArray function (and even within the boolSortArray branch), I have presumed that sortedWorking would be available at that point. It is in IE9 but not in FireFox/Chrome. In the line quoted, sortedWorking is empty in FireFox/Chrome. No errors are issued in any browser.

Experiments show that sortedWorking is populated just before the line noted as "end of $.getJSON," while just after that line it is empty. Any thoughts?

function ProcessArray(arWorking, boolSortArray, idX, isPartners, isChildren) {
//...
var sortedWorking = [];
if(boolSortArray) {
  $.getJSON('MurakiMaida.json', function(data) {
    $.each(data.person, function(i, xdata) {
    ...
    sortedWorking.push(targetID + ":" + birthYear);
    ...
    }); //end of $.each
  });   //end of $.getJSON

  var HoldEm = BubbleSort(sortedWorking);

Upvotes: 0

Views: 290

Answers (1)

Pointy
Pointy

Reputation: 413712

Your call to "$.getJSON()" is asynchronous. You can't rely on the array to be populated in the lines of code following the call. Instead, put your code that relies on the array being populated inside the completion handler for it.

function ProcessArray(arWorking, boolSortArray, idX, isPartners, isChildren) {
//...
var sortedWorking = [];
if(boolSortArray) {
  $.getJSON('MurakiMaida.json', function(data) {
    $.each(data.person, function(i, xdata) {
    ...
    sortedWorking.push(targetID + ":" + birthYear);
    ...
    }); //end of $.each

     var HoldEm = BubbleSort(sortedWorking);
     // ... whatever else ...
  });   //end of $.getJSON

Now this may also mean that your "ProcessArray" function itself will need to be re-thought, because, similarly, after it returns you still cannot be sure that the array will have been populated. Generally the way that is done is to follow exactly the same pattern that "$.getJSON()" itself follows: add a callback parameter to "ProcessArray()" so that its clients can pass in a function to be invoked when the array has been fetched and sorted and whatever else is done.

Upvotes: 3

Related Questions