Problems returning object from PHP query in Javascritpt function

Question

I have the following javascript code:

    function requestUserList(){
      //El primer paso es obtener de PHP toda la información de los usuarios
      var ret;
      jQuery.ajax({
            type: "POST",
            url: 'userfunctions.php',
            dataType: 'json',
            data: {functionname: 'all_user_data'},
            success: function (obj) {
//                if (obj.error == ""){                 
//                  for (i = 0; i < obj.users.length; i++){
//                    addAUser(obj.users[i],i);
//                  }
//                }
//                else{
//                  postErrorMessage(obj.error);
//                }
                  console.log("Number is " + obj.users.length);
                  ret = obj;
                }
        }); 
    console.log("Going back. N is " + ret.users.length);
    return ret;
    }

The problem is that the message "Number is" is printed in the correct value in the console. However on the second console print ("Going back. N is") I get the error that users is not a property of undefined. I'm assigning the return value incorrectly, somehow, but I don't know why. Can anyone help me? I want obj to be the return of the function.

possible duplicate of [How to return the response from an Ajax call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — andrew, Sep 01 '14 at 11:41
Yes, I looked for it the wrong. Way. But, yes this is a duplicate of that question. Thank you. — aarelovich, Sep 01 '14 at 11:44

score 0 · Accepted Answer · answered Sep 01 '14 at 11:38

Your function is async, so you can't return your desired value in this way, you can use callback or promise, an example of callback for your situation:

function requestUserList(callback){
    jQuery.ajax({
        type: "POST",
        url: 'userfunctions.php',
        dataType: 'json',
        data: {functionname: 'all_user_data'},
        success: function (obj) {
            callback(obj);
        }
    }); 
}

requestUserList(function (obj) {
    console.log(obj);
});

score 0 · Answer 2 · answered Sep 01 '14 at 11:44

You have a variable scope error. var ret; defines ret only for the function scope. You then declare a new function within with a new scope that implicitly declares ret a second time.

This way the first ret has absolutely nothing to do with the second ret. You need to call whatever needs the ret in the success function. Now the return does not return the value to your function, but the jQuery.ajax call - and that one dies after the call.

Additionally AJAX is async. This means you don't know when it will finish - and as such, you cannot return values from there. At least in a sensible way.

getSomething = function () {
    $.ajax({
        url: url,
        data: "",
        type: 'GET',
        success: doSuccessStuff,
        error: doErrorStuff,
    });
};

doSuccessStuff = function (data) {
  // Have your stuff in data like data.myVariable
};

You could switch the AJAX to be synchronous - then get the values from the success function like this:

getSomething = function () {
    $.ajax({
        url: url,
        data: "",
        type: 'GET',
        success: doSuccessStuff,
        error: doErrorStuff,
        async: false
    });
};

doSuccessStuff = function (data) {
  // Have your stuff in data like data.myVariable
};

However this is kind of a bad practice, as it stops your program flow until it either times out or gets a reply. Better stick to the forward execution of chaining functions in the success call.

Problems returning object from PHP query in Javascritpt function

2 Answers2