I cannot return data from an asynchronous Ajax

Question

I make the population 4 HTML select with Ajax, however I’m having trouble returning the files, I tried to do it asynchronously only it was not good because the user can see each select being populated in order(besides the delay is ugly to see), when I changed my function to asynchronous and my Ajax also, I can not return data, example.

function GetDropdownList(table)
{
    var DDItems;

    function GetDropdownList_AjaxCallBack(data) {
        DDItems = data;
    };
    $.ajax({
        type: "POST",
        url: "/Ajax/GetDropdownList",
        dataType: "json",
        data: {
            table: table
        },
        async: true
    })
    .done(function (data) {
        GetDropdownList_AjaxCallBack(data);
    })
    .fail(function (XMLHttpRequest, textStatus, errorThrown) {
        console.log(errorThrown);
        });

    return DDItems;
}

async function PopulateDropDown(dropdownID) {
    var dropdownItems = GetDropdownList(dropdownID);
    console.log(dropdownItems.items);      
}


PopulateDropDown("LicenseDocs_Midia");
PopulateDropDown("LicenseDocs_Regiao");
PopulateDropDown("LicenseDocs_Prazo");
PopulateDropDown("LicenseDocs_Use");

In the console log. get the following JS error:

Typeerror: dropdownItems is Undefined

I researched that to return objects from asynchronous Ajax just create a Callback, but it is not working and I can’t find a solution...

Answer 1

the problem is happening because you are initiating 'Dditems' and assigning a value only in the return of AJAX, but your function is returning before AJAX has been completed. There are two ways (I thought) to solve this problem.

The first one is using a callback. Ex.:

function GetDropdownList(table, callback)
{

    $.ajax({
        type: "POST",
        url: "/Ajax/GetDropdownList",
        dataType: "json",
        data: {
            table: table
        },
        async: true
    })
    .done(function (data) {
        callback(data)
    })
    .fail(function (XMLHttpRequest, textStatus, errorThrown) {
        console.log(errorThrown);
        });
}

async function PopulateDropDown(dropdownID) {
    GetDropdownList(dropdownID, response => console.log(response.items) );
}

The second solution would be to use Promise (almost the same thing as callback). Ex.:

function GetDropdownList(table)
{
   return new Promise((resolve,reject) => {
     $.ajax({
        type: "POST",
        url: "/Ajax/GetDropdownList",
        dataType: "json",
        data: {
            table: table
        },
        async: true
    })
    .done(function (data) {
        resolve(data);
    })
    .fail(function (XMLHttpRequest, textStatus, errorThrown) {
        reject(errorThrown);
        });

   })
}

async function PopulateDropDown(dropdownID) {
    GetDropdownList(dropdownID)
        .then(response => console.log(response.items) )
        .catch(err => console.error(err) )
}

Answer 2

Using César’s answer, if you want to save the data in a variable you can use Promise like this:

function GetDropdownList(table)
{
   return new Promise((resolve,reject) => {
     $.ajax({
        type: "POST",
        url: "/Ajax/GetDropdownList",
        dataType: "json",
        data: {
            table: table
        },
        async: true
    })
    .done(function (data) {
        resolve(data);
    })
    .fail(function (XMLHttpRequest, textStatus, errorThrown) {
        reject(errorThrown);
        });

   })
}

async function PopulateDropDown(dropdownID) {
    var armazena = await GetDropdownList(dropdownID)
    console.log(armazena);
}

Answer 3

About the error:

TypeError: dropdownItems is undefined

Basically your code is assigning values to an object not yet rendered by your browser or that at the time it was called the function was still being built. Be sure to assign values only after your Document is ready.

Examples of ways to make sure your HTML is ready: Link