Anthony Atang Anthony Atang - 7 months ago 22
Javascript Question

Passing data to a variable after an ajax request

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

Answer

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?