Set value of global array in javascript

Question

$(document).ready(function(){
var currArray=null;
var group=null;
var admin=null;
var equipment=null;
var student=null;
console.log("after get array info");
for(var i=0; i<equipment.length; i++)
{
    console.log("equipment at index after get array info: "+i+" val: "+equipment[i]);
}
setArray();

console.log("finished initial");
function getArrayInformation()
{
    console.log("Get array information");
    //equipment=new Array("Item ID", "Model", "Series", "Manufacturer");
    $.post("Search", function(response)
            {
                console.log("back from Search AJAX");
                $.each(response, function(index, val)
                        {
                            console.log("index of .each for Search AJAX response: "+index+" value of this: "+val);
                            jsonParse(index, val);
                        });
            });
}
function jsonParse(index, val)
{
    if(index == "equipment")
        {
            console.log("setting equipment array");
            equipment = val.split(",");
            console.log("equipment array after creating it");
            for(var i=0; i<equipment.length; i++)
            {
                console.log("equipment at index: "+i+" val: "+equipment[i]);
            }
        }
    else if(index == "student")
        {
            student = val.split(",");
        }
    else if(index == "group")
    {
        group = val.split(",");
    }
    else if(index == "admin")
    {
        admin = val.split(",");
    }

}

As you can see I have the variable equipment equal to null initially. It is then set in jsonParse. However when I try to print out the values in it after the getArrayInformation function is finished the javascript console in Firefox says that it is null.

I am confused why it is saying that. The only thing I can think of is that it is only being set for local use in the jsonParse function. If in fact is only like that locally, however should I set it for global(within document.ready) use?

This is a duplicate of one of the most often asked javascript questions. I will go see if I can find the most common one to mark it as a dup of. The Ajax call finishes some time LONG after `getArrayInformation()` returns. The ONLY place to use the returned data is in the success handler or in a function you call from there because that's when you know the data is actually there. — jfriend00, Mar 20 '14 at 05:18
setArray is farther down in the code, but i felt that it is not quite relevant to this problem. — Jesse Turnbull, Mar 20 '14 at 05:20

score 0 · Accepted Answer · answered Mar 20 '14 at 05:16

The problem is $.post is asynchronous (see https://api.jquery.com/jQuery.post/). So, when the script tries to access to the equipment variable, it has not been initialized yet. Probably you want to put your code inside the $.post callback:

$.post("Search", function(response) {
  console.log("back from Search AJAX");
  $.each(response, function(index, val) {
    console.log("index of .each for Search AJAX response: "+index+" value of this: "+val);
    jsonParse(index, val);

    // Your code below
    for(var i=0; i<equipment.length; i++) {
      console.log("equipment at index after get array info: "+i+" val: "+equipment[i]);
    }
  });
});

Oh right, I completely forgot that AJAX is asynchronous! Doh! Thank you! — Jesse Turnbull, Mar 20 '14 at 05:25

Set value of global array in javascript

1 Answers1