access data from ajax function in another function

Question

My MWE data.js looks like this:

var data = [];
function initdata(){
    $.ajax({
        ...
        success: function(data){
            data.push("test");
        },
        ...
    });
}
$(document).ready(function(){
    initdata();
    console.log(data.length);
    console.log(data[0]);
}

But the console says, data.length is 0 and data[0] is undefined. How can I access data from an ajax function in another function?

*"How can I access data from an ajax function in another function?"* You pass the data to that other function. — Felix Kling, Jan 19 '17 at 05:06

score 3 · Accepted Answer · answered Jan 19 '17 at 04:11

3

$.ajax() is asynchronous, so by the time it completes its request and runs data.push('test') your console.log(data.length) has already completed.
A way to fix this is to use a callback:

function initdata(callback) {
    $.ajax({
        ...
        success: function(result) { // or just success: callback,
            callback(result);
        }
    });
}
$(document).ready(function() {
    initdata(function(data) {
        console.log(data.length);
        console.log(data[0]);
    });
}

answered Jan 19 '17 at 04:11

tklg

2,572
2
19
24

Thanks, this helped a lot. – LukeLR Jan 19 '17 at 18:29
Thank you! Is there a way to achieve this same thing with $.when? https://api.jquery.com/jquery.when/ – tertek Mar 23 '21 at 15:00

access data from ajax function in another function

1 Answers1