jQuery AJAX won't store data in a variable

Question

The following code:

jQuery.extend({
    getAnalytics: function() {
        var result = null;
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '/master/analytics/reports',
            success: function(data) {
                result = data;
                console.log(result);
            }
        });
        console.log(result);
        return result;
    }
});

var results = $.getAnalytics();
console.log(results);

shows this in the console:

{20181002: 0, 20181003: 0, 20181004: "2", 20181005: "9", 20181006: 0, 20181007: 0, 20181008: "2", 20181009: "3", 20181010: "1"}
null
null

I cannot figure out what I did wrong in my request to have result and results both come back with null even though result inside of success has a json string. I'm not understanding something about variables here.

This has a lot to do with JavaScript's synchronous nature. I'd recommend taking a look at: https://stackoverflow.com/a/32456239/10430668 — Jpec07, Oct 10 '18 at 18:13

score 0 · Accepted Answer · answered Oct 11 '18 at 19:16

I was not respecting the Asynchronous nature of an AJAX call. It's in the name.

I fixed it by doing the following.

success: function(data) {
            result = data;
            functionToPerform();
        }

function functionToPerform() {
    // code that depends on the data sent back from the Ajax request
    // fire this only after a successful AJAX request
}

jQuery AJAX won't store data in a variable

1 Answers1