Passing data to a variable after an ajax request

Question

Im having issues getting my data passed back to an external variable. I know the ajax request works but its not passing it in the manner that i need.

here is a exact method in my class

function(amount,symbol=''){
   var current_rate = '';
   var url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D'https%3A%2F%2Fwww.google.com%2Ffinance%2Fconverter%3Fa%3D"+ amount +"%26from%3DNGN%26to%3D"+ symbol +"'%20and%20xpath%3D'%2F%2Fdiv%5B%40id%5D'&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
   
   var get_rate = $.ajax({
     url: url,
     method: "GET"
   }).complete(function(data){
    current_rate = data.responseJSON.query.results.div.span.content;
   }).fail(function( jqXHR, textStatus ) {
    alert( "Request failed: " + textStatus );
   });
  
   return current_rate;
  }

Ive edited the code for simplicity. but heres the full script . I just need to know how to pass the data from the request back into the 'Current_rate' variable

Ajax is asynchronous call... So current rate will be returned faster than done/fail is called... and in addition current_rate is out of scope I guess... To make some trick you can call ajax synchronously.. like here http://stackoverflow.com/questions/6685249/jquery-performing-synchronous-ajax-requests But I do not recommend it.. better to rewrite your code... — Maxim, Apr 20 '16 at 00:44

score 0 · Accepted Answer · edited May 23 '17 at 10:28

Your function returns current_rate = '' because that's the value of current_rate when the function ends. It ends before the asynchronous call completes!

This part:

$.ajax({
  url: url,
  method: "GET"
}).complete(function(data){
    current_rate = data.responseJSON.query.results.div.span.content;
})

Will set current_rate when the AJAX call returns, which will be long after your function returns. You have to think of $.ajax() as scheduling the request (and the code that runs when the request is complete). It doesn't block or wait for that to happen - your function just continues on.

The best solution here is to return the promise that $.ajax() returns, so your calling function can wait on it:

function(amount,symbol=''){
            var url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D'https%3A%2F%2Fwww.google.com%2Ffinance%2Fconverter%3Fa%3D"+ amount +"%26from%3DNGN%26to%3D"+ symbol +"'%20and%20xpath%3D'%2F%2Fdiv%5B%40id%5D'&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";

            return $.ajax({
              url: url,
              method: "GET"
            });
        }

In order to use this, call the function like this:

get_current_rate(1000,'CAD').complete(function(data) {
     // do something with the returned data
});

See the documentation for the jQuery Deferred object. See also this post, which contains an excellent (long!) explanation of the problem and various solutions: How do I return the response from an asynchronous call?

Avoid the [deferred antipattern](http://stackoverflow.com/q/23803743/1048572)! — Bergi, Apr 20 '16 at 00:55

Passing data to a variable after an ajax request

1 Answers1