Return data from Closure Within Block Within Function

Question

I have setup my JavaScript thus

function getData(uri) {
    var $result;
    var demoAPI = uri;
    $.getJSON(demoAPI, function(data) {
        $.each(data, function(key, val) {
            names[key] = val["name"];
            numbers.push(val["number"]);
        });
    }).done(function() {
            for(i = 0; i < names.length; i++) {
                var tmp = new Array(names[i], numbers[i]);
                result.push(tmp);
            }
            return result;
        });
}

Problem is, with this setup is I cannot use the function thus:

var values = getData('/users');

as the return statement is in a closure within the $.getJSON block, if I do call the return after said block it returns an empty array because it gets called before the ajax call is completed. I will encounter the same challenge if I attempt to use $.ajax(). I need help returning the generated array from my function getData().

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) — Karl-André Gagnon, Apr 22 '14 at 12:44

score 4 · Accepted Answer · answered Apr 22 '14 at 12:34

As you've discovered, you cannot reliably return data from asynchronous functions. You need to pass a callback function to be executed when the data is received. Try this:

function getData(uri, callbackFn) {
    var $result;
    $.getJSON(demoAPI, function(data) {
        $.each(data, function(key, val) {
            names[key] = val["name"];
            numbers.push(val["number"]);
        });
    }).done(function() {
            for(i = 0; i < names.length; i++) {
                var tmp = new Array(names[i], numbers[i]);
                result.push(tmp);
            }
            callbackFn(result);
        });
}

getData('/users', function(result) {
    // do what is required with the returned data...
});

Return data from Closure Within Block Within Function

1 Answers1