I can not return data from an asynchronous Ajax

Question

I can not return data from an asynchronous Ajax

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (-1 votes)

0

I have the population of 4 HTML select with Ajax, however I have a problem when returning the files, I tried to do asynchronously only that 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 too, 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 console.log I get the following JS error:

TypeError: dropdownItems is undefined

I've found that to return asynchronous objects from Ajax just create a Callback, but it's not working and I can not find a solution ...

javascript ajax

asked by anonymous 05.12.2018 / 18:23

3 answers

Doubt on date manipulation using time.h Post Table Title [duplicate]

score 0 · Answer 1

The problem is happening because you are initializing 'DDItems' and assigning a value only on AJAX return, but its function is returning before AJAX has been completed. There are two ways (which 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) )
}

score 0 · Answer 2

Using the Caesar response, if you want to save the data into 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);
}

score -1 · 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 the values only after your Document is ready.

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