Getting the output from AJAX when the onreadystatechange event occurs

Question

Getting the output from AJAX when the onreadystatechange event occurs

Struggling with retrieving a value from a function and storing it in a variable? Getting an "undefined" result due to JavaScript's asynchronous nature? Unsure how to fix this using "callbacks" or "promises"? Check out the code snippet below. The goal is to extract the exchange rate stored in "value" variable and assign it to the "rate" variable for further use in the code.

var rate = rateCalc();
var currency = "EUR";

function rateCalc(){
var value;
if (currency != "EUR"){
var xmlhttp = new XMLHttpRequest();
var rateURL = "http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D"+"EUR"+"HKD"+"%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var json = JSON.parse(xmlhttp.responseText);
value = json.query.results.row.rate;
alert("At this position the value is defined: "+ value);
return value;
}
}
xmlhttp.open("GET", rateURL, true);
xmlhttp.send();
}

else {
value = 1;
return value;
}
}
alert("The return statement somehow didn't work: "+ rate);

If this question has been answered before, apologies, as I'm new here.

Thanks, René

javascript ajax

Answer 1

Answer №1

In JavaScript, you cannot directly return anything from an async function. Instead, you need to create a new function and use it as a callback function. Here is an example demonstrating this concept:

    var rate = rateCalc();
    var currency = "EUR";

    function rateCalc(){
        var value;
        if (currency != "EUR")  {
            var xmlhttp = new XMLHttpRequest();
            var rateURL = "http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D"+"EUR"+"HKD"+
                              "%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json";
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var json = JSON.parse(xmlhttp.responseText);
                    value = json.query.results.row.rate;
                    alert("At this position the value is defined: "+ value);
                    valueCallBack(value); //Callback function

                }
            }
        xmlhttp.open("GET", rateURL, true);
        xmlhttp.send();
        }

        else {
            value = 1;
            return value;
        }
    }

   function valueCallBack(value){
     console.log("value is " + value);      
   }

Update : Alternatively, you can utilize the Promise API introduced in ES6 or leverage JQUERY deferred objects for handling asynchronous operations.

Answer 2

In JavaScript, you cannot directly return anything from an async function. Instead, you need to create a new function and use it as a callback function. Here is an example demonstrating this concept:

    var rate = rateCalc();
    var currency = "EUR";

    function rateCalc(){
        var value;
        if (currency != "EUR")  {
            var xmlhttp = new XMLHttpRequest();
            var rateURL = "http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D"+"EUR"+"HKD"+
                              "%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json";
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var json = JSON.parse(xmlhttp.responseText);
                    value = json.query.results.row.rate;
                    alert("At this position the value is defined: "+ value);
                    valueCallBack(value); //Callback function

                }
            }
        xmlhttp.open("GET", rateURL, true);
        xmlhttp.send();
        }

        else {
            value = 1;
            return value;
        }
    }

   function valueCallBack(value){
     console.log("value is " + value);      
   }

Update : Alternatively, you can utilize the Promise API introduced in ES6 or leverage JQUERY deferred objects for handling asynchronous operations.

Answer 3

Answer №2

Make sure not to leave xmlhttp.send() empty. Give this a try - it should work!

xmlhttp.send(null);

Answer 4

Make sure not to leave xmlhttp.send() empty. Give this a try - it should work!

xmlhttp.send(null);

Answer 5

Answer №3

If you want to ensure that the value is displayed properly without any undefined issues, you can pass it to another function.

Give this a try:

fetchExchangeRate();
var currency = "EUR";

function fetchExchangeRate() {
    var value;

    if (currency != "EUR")  {
        var xmlhttp = new XMLHttpRequest();
        var rateURL = "http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D"+"EUR"+"HKD"+"%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json";

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var json = JSON.parse(xmlhttp.responseText);
                value = json.query.results.row.rate;
                displayValue(value);
            }
        };

        xmlhttp.open("GET", rateURL, true);
        xmlhttp.send();
    } else {
        value = 1;
        displayValue(value);
    }
}

function displayValue(rate) {
    alert("Value: "+ rate);
}

Answer 6

If you want to ensure that the value is displayed properly without any undefined issues, you can pass it to another function.

Give this a try:

fetchExchangeRate();
var currency = "EUR";

function fetchExchangeRate() {
    var value;

    if (currency != "EUR")  {
        var xmlhttp = new XMLHttpRequest();
        var rateURL = "http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D"+"EUR"+"HKD"+"%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json";

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var json = JSON.parse(xmlhttp.responseText);
                value = json.query.results.row.rate;
                displayValue(value);
            }
        };

        xmlhttp.open("GET", rateURL, true);
        xmlhttp.send();
    } else {
        value = 1;
        displayValue(value);
    }
}

function displayValue(rate) {
    alert("Value: "+ rate);
}

Answer 7

Answer №4

Here is the revised code implementation. The callback function is now utilized for subsequent calculations with the returned value. Special thanks to @Jijo John and @nx0side for their assistance.

let currency = "HKD";
let value;

if (currency !== "EUR") {
    let xmlhttp = new XMLHttpRequest();
    let rateURL = `http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D${"EUR"}${"HKD"}%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json`;
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            let json = JSON.parse(xmlhttp.responseText);
            value = json.query.results.row.rate;
            valueCallBack(value); //Callback function
        }
    };
    xmlhttp.open("GET", rateURL, true);
    xmlhttp.send();
} else {
    valueCallBack(1);
}

// All further calculations with "value" should be performed within this function.
function valueCallBack(value) {
    // Example calculation
    let result = 70000 / value;
    console.log("Result is " + result);
}

Answer 8

Here is the revised code implementation. The callback function is now utilized for subsequent calculations with the returned value. Special thanks to @Jijo John and @nx0side for their assistance.

let currency = "HKD";
let value;

if (currency !== "EUR") {
    let xmlhttp = new XMLHttpRequest();
    let rateURL = `http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D${"EUR"}${"HKD"}%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json`;
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            let json = JSON.parse(xmlhttp.responseText);
            value = json.query.results.row.rate;
            valueCallBack(value); //Callback function
        }
    };
    xmlhttp.open("GET", rateURL, true);
    xmlhttp.send();
} else {
    valueCallBack(1);
}

// All further calculations with "value" should be performed within this function.
function valueCallBack(value) {
    // Example calculation
    let result = 70000 / value;
    console.log("Result is " + result);
}

Getting the output from AJAX when the onreadystatechange event occurs

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way for me to receive numerical values instead of NaN?

Rows per page options fail to display in the DataTable component

Is there a way to update a variable in a controller using AJAX?

How can we convert milliseconds to the corresponding date and time zone in Java?

Sending blank information via Ajax request

Discover information based on attribute value with MarkLogic

Is it possible to incorporate custom scripts into the <head> section of the index.html file in Docusaurus?

Modify File Name with Fine Uploader: Personalize Your File Titles

What is the best way to incorporate a third-party element into Vue using a script tag?

Is there a way to prevent duplicate requests in jQuery?

a tutorial on linking component data to a prop value

Utilizing the power of Vue.js version 2.x alongside the sleek features of Bootstrap

Unexpected restarts are occurring in a lengthy PHP script

Authenticating Users with Laravel and Vue.js

Strategies for making a child div fade out when the parent div is hovered over

Is it possible to safeguard undisclosed data in browser console?

Issue encountered when attempting to develop a countdown timer using Typescript

AngularJS encounters an error message stating, "The data being posted is invalid in syntax according to the client."

Registering the service worker resulted in an error stating "Undefined is not a function"

Create a Boxplot chart using Chart.js that dynamically adjusts the minimum and maximum values to allow for additional space on either