7

I have the following Javascript function that should return an array of groups that are in database. It uses $.getJSON() method to call get_groups.php which actually reads 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 fill the var groups = []; (as I understand it fills some other groups array, probably the global one).

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

Improve this question

3 Answers 3

Reset to default
5

It's not a scope issue really, it's the fact that $.getJSON() is asynchronous, meaning that this part runs after you return:

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

You need to call whatever function needs this data in the callback of the asynchronous request, so it runs when the data's available, like this:

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

Currently you groups array is getting populated, just not when you need it to. If you absolutely have to return this (I strongly recommend using the asynchronous model the way it was intended) you can use the full $.ajax() version and set async:false. Again...don't go that route if possible, stick to calling whatever function needs the data once it's available, as async: false will lock up the user's browser.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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

Since EMCA-/Javascript does have function scope and you are using a closure there, you do have access to that variable. So the problem here, is not the scope. So even with a global variable with the exact same name, the such called lexical scope will guarantee you the access to your local variable.

The actuall problem is, that return groups is executed before $.getJSON() does complete. Since it creates an ajax request, it run asynch.

You should use a 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
});
Improve this answer

4 Comments

Moving the return statement doesn't work, the function will simply return nothing then.
was fixed before you send that :p
For your edit, you can do this a bit cleaner with .call(null, groups), but the first part of your answer is a bit off...if there's a more local variable with the same name you're always using that variable, a global one will never override a more-locally scoped one.
@Nick: yay, maybe. I hoped the second part about function scope makes it clear.
0

"$.getJSON('get_groups.php', function(response) {" is an Callback-Function.

The changes in the groups-Array are affect after the callback is trickerd and also after you return groups.

  1. get_groups enterd
  2. request the url and register a callback
  3. return groups
  4. end of "get_groups"
  5. trigger callback
  6. anynomous callback-function enterd
  7. modifie groups-array
  8. end of anynomous callback-function

you could not return the modifies of the callback-function directly.

Improve this answer

1 Comment

FYI synchronous ajax would solve the problem, but is not recommended

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.