Await ajax call in JavaScript

Question

I know that there's many questions and answers about this but I'm new to JavaScript and I'm facing problem with async/ await function. I have two function : getInvoices() where I have a ajax call to get the needed data, and loadBarChart(data) that renders a bar chart. For the chart I'm using ApexCharts. So I first call getInvoices() function to get the data and then I call loadBarChart(data) passing the data like this:

$(document).ready(function () {
    var data = getInvoices();
    console.log(data); // data is undefined
    loadBarChart(data); 
 });

The data is always undefined probably because the ajax call is not done jet.

Here is getInvoices() function code:

function getInvoices() {
    var url = "@Url.Action("GetInvoiceCustum");
        $.ajax({
            type: "GET",
            dataType: "json",
            url: url,
            success: function (data) {
                return data;
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    }

Following this I changed the code, but at the end I don't know how to pass the data from getInvoices() to loadBarChart(data);

So far this is what I have :

$(document).ready(function () {
    var url = "@Url.Action("GetInvoiceCustum");
    var ajax1 = new Promise((resolve, reject) => {
        $.ajax({
            type: "GET",
            url: url,
            success: function (data) {
                resolve("OK");
                result = data;
            },
            error: function () {
                reject(" ERROR");
            },
        });
    });

   //At this point how can I acces the result from ajax call, and call the loadBarChart(data)
     ajax1.then(values => {
        console.log(values)
     }, reason => {
        console.log("Errors: " + reason)
     });

    ajax1.then(function (data1) {
        var data = data1.result;
        console.log(a);
        return data1.result;
        //loadBarChart(data);
    })

});

Doing this how can I access the data that returns getInvoices() and then call loadBarChart(data), or there are other ways to make this posible?

score 0 · Answer 1 · answered Jun 09 '21 at 06:09

0

You can call the second function in success of the first function like

        $.ajax({
            type: "GET",
            url: url,
            success: function (data) {
                loadBarChart(data);
            },
            error: function () {
                reject(" ERROR");
            },
        });

answered Jun 09 '21 at 06:09

Bivek Rawat

11
2

Yes, but I have a button that calls `getInvoices()` to update/refresh the chart, if I press the button 10 times I will have 10 charts. To avoid this the `loadBarChart()` should be outside the ajax call. Acording to [this updateSeries](https://apexcharts.com/docs/methods/) I can handle this if `loadBarChart()` is outside the ajax call. – lgica Jun 09 '21 at 06:31
In that case, you'll need to chart.updateSeries(getInvoices()) and loadBarChart() will be called on document ready with empty data first. – Bivek Rawat Jun 09 '21 at 06:49
yes, thats what I have right now. And to avoid to have empty data at first, acording to [this](https://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done/54195741#54195741) I maid changes to my code as I said before. The only problem, I think, is that I don't know how to pass the result to `loadBarChart()` – lgica Jun 09 '21 at 07:27

Await ajax call in JavaScript

1 Answers1