Getting variable value from $.each anonymous function

Question

This is my AJAX success callback:

success: function(data){
        var uD = '<ul class="user-details">';
        $.each(data['user details'], (function(key,val){
            uD += '<li><label>' + key + ':</label><span>' + val + '</span></li>';
        });
        uD += '</ul>';
        return uD;
}

data is a JSON object.

As you can see, I'm trying to build a list out of the JSON object, but by the time I return the variable uD, it's undefined. How can I get the value of uD past the scope of the $.each function?

Edit: Sorry, I should have specified. The return statement was only in the AJAX callback because the AJAX call is within another function (which needs to return something.) Since it's async, I couldn't return 'after' the AJAX call, it had to be in the callback.

It is not a problem of `$.each`, you cannot return data from an Ajax callback. See: [jQuery: Return data after ajax call success](http://stackoverflow.com/questions/5316697/jquery-return-data-after-ajax-call-success) (voted to be closed as duplicate) — Felix Kling, May 06 '11 at 17:24
@Kelly: There is no `return` in the `each` callback. The data is appended to the `uD` variable which the callback has access to. This will work correctly. But the OP is returning the data from the `success` callback and this will not work. — Felix Kling, May 06 '11 at 17:29
seems the question was flawed, according to wanavak's comment below. — Kelly, May 06 '11 at 17:31

kapa · Accepted Answer · 2011-05-06T17:37:51.073

2

From an Ajax callback, you cannot return data. I guess you want to insert the UL you have built into the DOM, so you should do it inside your Ajax callback function.

success: function(data){
        var uD = '<ul class="user-details">';
        $.each(data['user details'], (function(key,val){
            uD += '<li><label>' + key + ':</label><span>' + val + '</span></li>';
        });
        uD += '</ul>';
        $('body').append(uD);
}

Instead of body specify the element you want to insert it into or use any other DOM Insertion functions.

With asynchronous AJAX calls you cannot really return things. So you cannot do things like

function GetMyList() {
     //AJAX CALL
     //RETURN RESULT OF AJAX CALL
}

edited May 06 '11 at 17:37

answered May 06 '11 at 17:27

kapa

77,694
21
158
175

Sorry, I should have specified. The return statement was only in the AJAX callback because the AJAX call is within another function (which needs to return something.) Since it's async, I couldn't return 'after' the AJAX call, it had to be in the callback. – wanovak May 06 '11 at 17:29
@wanovak Because it's `async` you cannot really know when will it actually return, so you cannot depend on it in your `another function` that has made the AJAX call. You can make your AJAX callback call another function though, or trigger an event. – kapa May 06 '11 at 17:32
Technically this was correct. Thank you. – wanovak May 06 '11 at 17:46

Erick Petrucelli · Answer 2 · 2011-05-06T17:47:43.987

If you create a variable before your AJAX call and set a value to it inside the success function, you will be able to read it variable on any other part of you code.

EDIT

Based on your comment (you need to return this value from a function), all your calls to this function needs wait it response. Then, I suggest you to turn off async .

var uD = null;

...

async: false,
success: function(data){
    uD = '<ul class="user-details">';
    $.each(data['user details'], (function(key,val){
        uD += '<li><label>' + key + ':</label><span>' + val + '</span></li>';
    });
    uD += '</ul>';
}

return uD;

Getting variable value from $.each anonymous function

2 Answers2