getJSON doesn't work in a function it returns a value

Question

I have this code it works perfectly:

$.getJSON('/admin/get_acronyms', function(data) {
    //load JSON
    $.each(data, function(key, val) {
        if(key === 'error') {
            alert(val);
        } else {
            //Update typeahead source
            autocomplete.data('typeahead').source = val;
        }
    });
});

And I want to minimize it inside this function for code reusing:

var getAndAppendJSON = function(url) {
    var result;
    $.getJSON(url, function(data) {
        $.each(data, function(key, val) {
            return val;
        });
    });
};


var arr = getAndAppendJSON('/admin/get_acronyms');
autocomplete.data('typeahead').source = arr;

But this function doesn't work :(.

JS Console shows me that var arr is undefinied

Anyone knows why? Thanks in advance.

possible duplicate of How to return the response from an AJAX call from a function? — Felix Kling
– Felix Kling, Commented Mar 19, 2013 at 23:31

user1726343 · Accepted Answer · 2013-03-19 23:31:57Z

4

getAndAppendJSON doesn't actually return anything. It initiates an AJAX call that completes after its invocation has completed. What you should do is use the returned data inside the callback:

var getAndAppendJSON = function(url) {
    var result;
    $.getJSON(url, function(data) {
        autocomplete.data('typeahead').source = data;
    });
};

Your request will take a bit of time to make a trip to the server and back. This is what handlers are for, to be able to work with data once it is returned to you after an indeterminate period of time.

answered Mar 19, 2013 at 23:31

user1726343

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

3 Comments

Carlos Azaustre Over a year ago

Thank you so much @Asad! Now I know how use better the function :)

user1726343 Over a year ago

@CarlosAzaustre You're welcome. Please do take a look at the question mentioned by Felix Kling, which has a great explanation of the asynchronicity in AJAX.

Carlos Azaustre Over a year ago

Anyway, What If I want to change "autocomplete.data('typeahead').source = data;" for other to automatize? Thanks in advance

Steve · Accepted Answer · 2013-03-19 23:37:43Z

3

Because AJAX is "asynchronous". You have your AJAX success handler return val, but where are you returning to?

When you execute

var arr = getAndAppendJSON('/admin/get_acronyms');

the AJAX call is getting sent to the server, but there is nothing being returned from that function. Therefore arr is undefined. By the time the AJAX call comes back from the server, the rest of the JS has long moved on.

To do what you are trying to achieve, the assignment has to happen in the callback function:

var getAndAppendJSON = function(url) {
    var result;
    $.getJSON(url, function(data) {
        autocomplete.data('typeahead').source = data;
    });
};

edited Mar 19, 2013 at 23:37

answered Mar 19, 2013 at 23:31

Steve

8,6487 gold badges42 silver badges54 bronze badges

Collectives™ on Stack Overflow

getJSON doesn't work in a function it returns a value

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related