How to return value from an ajax call function

Question

I have a function

function GetITStaffList(){
    var go_path = "Server/ITComplains.php?action=GetITStaffList&vars=0";
    $jqLibrary.get(go_path,
        {}, function(data)
        {
            var parseData = JSON.parse(data);
            console.log("GetPendingAndInProgressComplainsByGeneratorId : ", parseData);

            return parseData;
        });
}

I am calling this somewhere in the code like this

var ITStaffList = GetITStaffList();
MakeDropDownITStaff(ITStaffList);

But the problem is each time it is returning null. I know that I have to use callback and something like a promise but I don't how to fit this thing in my context. How do I write a reusable function with ajax call that returns data on demand.?

you can't return data synchronously from an asynchronous call (like AJAX is, i.e. the first A in AJAX stands for Asynchronous) - see stackoverflow.com/questions/14220321/… — Jaromanda X
– Jaromanda X, Commented Jan 3, 2018 at 6:41
Possible duplicate of How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request? — Core972
– Core972, Commented Jan 3, 2018 at 6:53

Charlie · Accepted Answer · 2018-01-03 06:52:22Z

1

Return a promise instead.

function GetITStaffList(){

    return new Promise(function(resolve){

       var go_path = "Server/ITComplains.php?action=GetITStaffList&vars=0";
       $jqLibrary.get(go_path,
           {}, function(data)
           {
               var parseData = JSON.parse(data);
               console.log("GetPendingAndInProgressComplainsByGeneratorId : ", parseData);

            resolve(parseData);    //Notice this
        });
    })
}

Now you can call the function and wait for data.

GetITStaffList().then(function(data){
    console.log(data)
})

answered Jan 3, 2018 at 6:52

Charlie

24k12 gold badges65 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Faizan Khan Over a year ago

Thanks it worked but it is very comlicated. what will i do if i have to get data from multiple request. Do i need to write nested then? Like in then function another then?

Charlie Over a year ago

ES6 supports "async" functions - which take the complications of promises away. Please google for that. Also, you can use some libraries which implement promise flow control. npmjs.com/package/promise-waterfall

Collectives™ on Stack Overflow

How to return value from an ajax call function

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related