Jquery - Store Ajax jSON response as variable

I'm trying to get the result of an ajax request to set in a variable which I can access outside that request. I've tried this JQuery - Storing ajax response into global variable but my variable beer remains undefined outside the $.getJSON and $.ajax functions (I tried both).

Here is my code and where I am able to see the results from the console.log(beer).

var beer;
$.getJSON(jsonUrl, function (json) {
    beer = json;
    console.log(beer); // returns beer
});
console.log(bee开发者_开发问答r); // returns undefined

var beer = (function () {
    var result;

    $.ajax({
        url: jsonUrl,
        success: function (data) {
            result = data;
            console.log(beer); // returns beer

        }
    });
    console.log(result); // returns undefined
    if (result) return result;
})();
console.log(beer); // returns undefined

That's an asynchronous request, so it gets fired off, but your script doesn't wait around for a response before it moves on. If you need to wait on a ajax request to finish, try something like this:

var beer;
$.getJSON(jsonUrl,function(json){
    beer = json;   
    checkDrink();                
});         

function checkDrink() {
    console.log(beer);
}   

Suggest the code below:

var beer = $.ajax({
    url: jsonUrl,
    async: false,
    dataType: 'json'
}).responseJSON;

The key moments are:

1. set async to false, to return result as variable, not call success callback asynchronious
2. set dataType to json to parse server response string as json

The problem is that you're trying to access the data before it actually comes back from the server, the 'success' function is actually a callback that gets called when the ajax call finishes successfully. The $.ajax (or $.get) functions return inmediatly...

You would need to somehow signal to the interested functions that you got the data into the 'beer' var inside your success callback