Need help with variable scope in Javascript

Question

I have the following Javascript function, which should return an array of groups located in the database. It uses the $.getJSON() method to call get_groups.php , which is actually reading from the database.

 function get_groups() { var groups = []; $.getJSON('get_groups.php', function(response) { for (var i in response) { groups.push(response[i]); } } return groups; } 

Unfortunately, this function does not work as expected, because groups.push(response[i]); does not populate var groups = []; (since I understand that it populates some other groups array, possibly global).

Assuming I don't want to have a global variable groups , how would you solve this problem?

Answer 1

This is not a scope issue, it is a fact that $.getJSON() is asynchronous, which means that this part starts after you return:

 for (var i in response) { groups.push(response[i]); } 

You need to call any function that needs this data in an asynchronous request callback, so it starts when data is available:

 $.getJSON('get_groups.php', function(response) { var groups = []; for (var i in response) { groups.push(response[i]); } doSomethingThatNeedsGroups(groups); }); 

You are currently grouping an array that is being filled, not when you need it. If you absolutely need to return this (I highly recommend using the asynchronous model the way it was intended), you can use the full version of $.ajax() and set async:false . Again ... do not follow this route, if possible, stick to calling any function that needs data when it is available, since async: false block the user's browser.

Answer 2

If you really have a global variable called groups (which would not be the best idea actually), you are talking to your "local" variable groups .

Since EMCA- / Javascript has a scope of functions , and you use closure , you have access to this variable. So the problem here is not an area. Thus, even with a global variable with the same name, such a lexical scope will guarantee you access to your local variable.

The problem with the actual is that return groups executed until $.getJSON() . Since it creates an ajax request, it starts asynch.

You must use callback yourself to process the data:

 function get_groups(cb) { var groups = []; $.getJSON('get_groups.php', function(response) { for (var i in response) { groups.push(response[i]); } cb.apply(null, [groups]); } } get_groups(function(groups){ // do something with groups array }); 

Answer 3

"$. getJSON ('get_groups.php', function (response) {" is a callback function.

Changes to array groups affect after the callback is trickerd, and also after the groups return.

• get_groups enterd
• request url and register callback
• return groups
• end of get_groups
• calling challenge
• anynomous callback-function enterd
• modifie groups-array
• end of any callback function

you cannot directly return callback functions.