Async call in javascript For Loop not working

Question

I have a callback function inside a loop here for (var res in results) { but it seems the loop is not waiting for the async call. When I am calling self.callTestOutputData(test_output_url) here, the loop is not waiting fpor the response but continuing for the next iteration and I am losing out the value to push into obj.requistion_number = testOutputResponse.value; Please note : var results = response.results Here results is an array of Json objects.

Edit 1 : I tried forEach but that didn't work .

results.forEach(res => {
  var obj = {}
  obj.ferp = res.name;
  // your code...
})

Original Code:

self.downloadDailyExcelProcurement = function (filters, excelTmpArr) {
                self.disableExcelDownloadProcurement(true);
                $('.useCaseExcelButtonProcurement .oj-button-button .oj-button-label')[0].style.backgroundColor = "gray";
                $('.useCaseExcelButtonProcurement .oj-button-button .oj-button-label .demo-download-icon-24')[0].style.color = "#D8D8D8";
                var payload = {};
                if (typeof filters === "string") {
                    var fill = filters;
                } else {
                    var fill = self.sendFilters();
                    if(self.app() === "fusion"){
                        fill += '&module=Procurement';
                    }else if (self.app() === "o2r"){
                        fill += '&module=O2r';
                    }
                }
                if(fill.includes("%3A")){
                    fill = fill.replace(/%3A/g, ':');
                }
                payload.Endpoint = 'executions/testcollection/' + fill;
                //console.log(payload.Endpoint)
                payload.BeforeSend = function (xhr) {
                    xhr.setRequestHeader('Authorization', 'Basic ' + btoa('guest:oracle123'));
                    $(".custom-loader-circle").show();
                };
                payload.OnSuccess = function (response) {
                    var results = response.results;
                    for (var res in results) {
                        var obj = {}
                        obj.ferp = results[res].name;
                        obj.po = "NA"
                        obj.receipt_no = "NA"
                        var test_output_url =  results[res].reference_test_cases[0].automation_tests[0].test_outputs[0]
         
                              $.when(self.callTestOutputData(test_output_url)).done(function (testOutputResponse) {
                                  if(testOutputResponse)
                                  obj.requistion_number = testOutputResponse.value;
                                  else {
                                     obj.requistion_number = "NA";
                                  }
                                
                                  self.excelTmpArr().push(obj);
                              });
                         }
                          else {
                             self.excelTmpArr().push(obj);
                        }
                    }
                    if (response.next) {
                        filters = ((response.next).split('testcollection'))[1];
                        if (filters[0] === "/") {
                            var test = filters.slice(1, filters.length);
                        }
                        self.downloadDailyExcelProcurement(test, self.excelTmpArr());
                    } else {
                        if (results.length === 0) {
                            $(".custom-loader-circle").hide();
                            self.disableExcelDownloadProcurement(false);
                            $('.useCaseExcelButtonProcurement .oj-button-button .oj-button-label')[0].style.backgroundColor = "#4d0000";
                            $('.useCaseExcelButtonProcurement .oj-button-button .oj-button-label .demo-download-icon-24')[0].style.color = "white";
                            showMessage(self.messages, "No Data to Download", '', 'info');
                        } else {
                            
                            self.formatForExcel(self.excelTmpArr(), fill, "Procurement");
                        }
                    }
                };
                payload.OnError = function (data) {
                    showMessage(self.messages, data.status, data.statusText, 'error');
                    $(".custom-loader-circle").hide();
                };
                getData(payload);
            }

Check this out: https://stackoverflow.com/questions/11488014/asynchronous-process-inside-a-javascript-for-loop#:~:text=This%20is%20because%20the%20for,when%20those%20async%20operations%20finish. — sonEtLumiere, Jan 30 '21 at 12:44

score 1 · Accepted Answer · answered Jan 30 '21 at 15:22

1

Try using async and await :

async function asyncCall () {
// call here
}

for (var res in results) {
    const response = await asyncCall();
}

answered Jan 30 '21 at 15:22

ssaraogi07

26
1

sonEtLumiere · Answer 2 · 2021-01-30T14:11:50.770

0

Use forEach() to iterate since it creates its own function closure:

results.forEach(res => {
  var obj = {}
  obj.ferp = res.name;
  // your code...
})

edited Jan 30 '21 at 14:11

answered Jan 30 '21 at 12:43

sonEtLumiere

4,461
3
8
35

Here i am getting an error: Uncaught TypeError: Cannot read property 'name' of undefined at obj.ferp = results[res].name; – etotientz Jan 30 '21 at 13:27
Nope, I tried by doing in this way : payload.OnSuccess = function (response) { var results = response.results; results.forEach(res => { var obj = {}; obj.ferp = res.name; // More code but it didnt work – etotientz Jan 30 '21 at 14:01
answer updated; modify this line: obj.ferp = res.name; – sonEtLumiere Jan 30 '21 at 14:12
, I tried that only in my last comment but it didnt work. – etotientz Jan 30 '21 at 14:19
try to console.log(res.name), you get the correct value? – sonEtLumiere Jan 30 '21 at 14:20
Yes, I am getting the value, but the loop is still going on without the callback completion – etotientz Jan 30 '21 at 14:22

score 0 · Answer 3 · answered Jan 30 '21 at 12:51

0

 var results = response.results;
  if(result.length > 0){
   results.map((data,index)=>{
                    //write your code here
                    }) 
  }

This will help you ..

answered Jan 30 '21 at 12:51

Sajib saha

301
4
16

Async call in javascript For Loop not working

3 Answers3