Javascript - How to pass data from two API ajax calls to one function

Question

I am attempting to make two seperate ajax calls to a third party API end point and display both its data on a HighChart graph. I am attempting to pass the data from both calls into my drawHighcharts function in order to display the data.

I am having issues with properly passing the data from both ajax calls. I've attempted to call back my drawHighcharts function in both my ajax calls. When console.logging both data I am only seeing the first stData but the odData is returning undefined. I am returning back stData twice and I believe that is because I am calling my function twice.

What is the proper way of handling both data into one function?

My expected outcome is to be able to access odData and stData in my drawHighCharts function.

function getStData() {
    $.ajax({
        type: "GET",
        url: stUrl,
        async: true,
        success: function (stData) {
            drawHighCharts(stData)

        },
        error: function (e) {
            // handle exception
            console.log("Error occured while reading resource file: ", e);
        }
    });
}

function getOdData() {
    $.ajax({
        type: "GET",
        url: odUrl,
        async: true,
        success: function (odData) {
            drawHighCharts(odData)
        },
        error: function (e) {
            // handle exception
            console.log("Error occured while reading resource file: ", e);
        }
    });
}

function drawHighCharts(stData, odData) {
    console.log(stData, "st")

    console.log(odData, "od")


}

I suppose, your functions `getOdData` shall return the Promise from `$.ajax$`, i.e. `return $.ajax({..});` — Maximilian Matthé, Sep 07 '22 at 07:17

Matt Croak · Accepted Answer · 2020-05-14T16:59:07.363

You're getting undefined because in your ajax calls you're only passing one argument. In getStData you're passing only stData to drawHighCharts and for getOdData you're only passing odData. It would make sense why in the drawHighCharts function one of the two arguments (the second one) is undefined since you're only passing one argument. Instead, you can wrap multiple get requests in Promise.all. This way your requests will be made and when they are both finished the promise will resolve and you can access both API results in the then following the Promise.all. See below.

function getStData() {
    $.ajax({
        type: "GET",
        url: stUrl,
        async: true,
        success: function (stData) {
            return stData

        },
        error: function (e) {
            // handle exception
            console.log("Error occured while reading resource file: ", e);
        }
    });
}

function getOdData() {
    $.ajax({
        type: "GET",
        url: odUrl,
        async: true,
        success: function (odData) {
            return odData
        },
        error: function (e) {
            // handle exception
            console.log("Error occured while reading resource file: ", e);
        }
    });
}

function drawHighCharts(stData, odData) {
    console.log(stData, "st")
    console.log(odData, "od")
}



Promise.all([
  getStData(),
  getOdData(),
]).then(([stData, odData]) => drawHighCharts(stData, odData))

This post is related to fetch requests in React but Promise.all can be used with ajax in regular JS.

score 0 · Answer 2 · answered May 14 '20 at 16:58

0

You can call getOdData() inside success of getStData() and pass stData to it. And then inside success of getOdData() you will have access to both stData and odData. Now you can call drawHighCharts() with both stData and odData.

answered May 14 '20 at 16:58

as-if-i-code

2,103
1
10
19

Javascript - How to pass data from two API ajax calls to one function

2 Answers2