Pass variables in ajax .done-function to javascript variable

Question

I tried to pass the results of an ajax .done() query to an object or variable outside of the .done function. Unfortunately, it seems impossible to read the variable outside of the function because every time I try to pass it to a global variable it get's the value "undefined". When I alert the variable inside the .done function, the value is read. Below you find my Code:

var result;
//doing the ajax call to a .php file
var dO = $.ajax({
            url: "/php-sites/fetch_ressources.php",
            type: 'post',
            dataType: 'json',
            data: {
                operation: "fetch_name"
            }
        });
        //fetching the result with done
        $.when(dO).done(function(data) {
            //alert works here
            result = data;
            alert(result);
        });
//alert doesn't work here
alert(result);

I'd like to know if the only solution is to pass the value to a DOM-Object and read it with another function. I'm looking forward to your answers! Thanks!

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — traktor, Mar 03 '18 at 04:53

score 0 · Answer 1 · answered Mar 03 '18 at 04:27

The alert works inside the doneCallback because it is called only after the ajax request is successful. If you have a function you need to pass the result variable, you should call this function inside doneCallback as you did with the alert.

In the below snippet I put an inner and outer log calls to show you that the outer log is being called before the inner. I've used a get request to the jquery script just for demonstration purpose. Run it and check the console output.

var dO = $.ajax({
            url:'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'            
        });
        //fetching the result with done
        $.when(dO).done(function(data) {                        
            console.log("inner log")
            processResult(data)
        });
  
console.log("outer log")

function processResult(result){
  console.log("The result is: " + result.substr(0,50))
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Lalit Mohan · Answer 2 · 2018-03-03T06:34:08.800

I think you are looking for a async option

1) async:false = Execution Hold. 
2) async:true = Execution continued.

Asynchronous means that the script will send a request to the server, and continue it's execution without waiting for the response.

var result;

var dO = $.ajax({
            url: "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js",
            async:false,
        });

        //fetching the result with done

        $.when(dO).done(function(data) {
            console.log("one");
            result = data;
            console.log(result);
        });

console.log('two');

var result;

var dO = $.ajax({
            url:'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' ,
            async: false,
        });

        //fetching the result with done

        $.when(dO).done(function(data) {
            console.log("one");
            result = data;
            console.log(result.substr(0,23));
        });

console.log("two");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 0 · Answer 3 · answered Mar 03 '18 at 08:08

I tried to pass the results of an ajax .done() query to an object or variable outside of the .done function. Unfortunately, it seems impossible to read the variable outside of the function because every time I try to pass it to a global variable it get's the value "undefined"

As Javascript's Asynchronous nature,result variable outside alert shows undefined ,because it does not get the .done function result value . By asynchrounus,it means there is no certainity of which to execute first(there is no order).As alert result outside is getting executed first before the when function and done function, it is logically undefined at that moment

When I alert the variable inside the .done function, the value is read.

when you use function like this, the "when" function is execute first before the .done function is executed which contains the result value.So when you alert after assigning the value of result to a data and you alert, it shows the value because it is defined by that value at that moment.

I'd like to know if the only solution is to pass the value to a DOM-Object and read it with another function. I'm looking forward to your answers

My suggestion would be to return the result value in the .done function and assign it outside to a variable. so that result gets the value outside and alert outside after that will have the value.

Pass variables in ajax .done-function to javascript variable

3 Answers3