How recuperate data from GET method with ajax/jquery

Question

Here is my function to get the data requested from a remote server. All is fine but one thing.

function get_users_request()
    {
        var result = [];
        var idx=0;
        $.get("getUsers_actions.php",
            function(data) {
                for (var key in data)
                {
                    result[idx++]=data[key];
                    console.log(data[key].login);
                }
            },
            "json");
            return result;
    }

The output is:

hissou
hbadri
user_1

But when i try to get get_users_request() result an empty array is given [].

"[How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call)" should explain why and what your options are. — Jonathan Lonowski, Aug 14 '13 at 08:33

Johan · Answer 1 · 2013-08-14T08:49:22.997

Since it's an asynchronous call, you need to make use of a callback when you call the function:

function get_users_request(callback)
{
    $.get("getUsers_actions.php", callback,"json");
}

get_user_request(function(data){

    //var result = [];
    //var idx=0;

    //for (var key in data)
    //{
    //     result[idx++]=data[key];
    //     console.log(data[key].login);
    //}

    $.each(data, function(k, v){
        console.log(v.login);
    });

});

To understand the code above, you could simulate an ajax call using a timeout:

var myAjaxResult;

setTimeout(function(){

    myAjaxResult = 1; // try to update the value

}, 1000 /* simulates a 1 second ajax call */);

console.log(myAjaxResult); //undefined

Since console.log(myAjaxResult); isn't wrapped in a callback, it will be called immediately, and thus still be undefined.

If we would have waited for at least one second, the value would be set. But instead of presuming a time when the call is completed, we can make a callback function and know exactly when its done:

function myFunc(callback){

    setTimeout(function(){
        callback(1 /* returns the value 1 to the callback */);
    }, 1000 /* simulates a 1 second ajax call */);

}

myFunc(function(callbackData){ //call the function using 
                               //the callback we just specified
    console.log(callbackData);
});

Hope this helps! Just let me know if anything is unclear.

@abualbara It's one function. First it's defined, and then it's called. — Johan, Aug 14 '13 at 13:45

score 0 · Accepted Answer · answered Aug 14 '13 at 10:53

This is what can give the result.

 function get_users_request(s)
        {
            var s =new Array(), idx=0;
            $.ajax({
                url: "getUsers_actions.php",
                success: function(data){
                    $.each(data, function(k, v){
                        s[idx++] = v.login;
                        console.log(v.login);
                    })
                    },
                dataType: "json"
            });
            console.log(s);
        }

score -1 · Answer 3 · answered Aug 14 '13 at 08:39

-1

You should put return result; after the for loop. The return should be done AFTER the $.get call is finished. Where is it now, the return is accessed right after the $.get call STARTS

answered Aug 14 '13 at 08:39

hex4

695
2
9
23

Moving the `return` inside the callback `function` changes the destination of the value to the code that called the callback (which isn't `get_users_request`). And, you can't use `return` inside one `function` (the callback) and have it apply to another (`get_users_request`). – Jonathan Lonowski Aug 14 '13 at 08:44
could you please give me ur suggestion? – Aug 14 '13 at 08:46
@abualbara My suggestion? That's already in a comment on the question. The linked Q&A thoroughly describes the problem and available solutions. – Jonathan Lonowski Aug 14 '13 at 08:50
i have move the return inside the callback, how can i apply it to the mother fucntion (get_users_request)? – Aug 14 '13 at 08:57

How recuperate data from GET method with ajax/jquery

3 Answers3