'Typescript: Convert For loop to Promise and wait to resolve all

ISSUE: save.emit() runs before all the iterations are completed in the below "for" loop which shows incorrect values of the addUpdate call inside loop.

I am trying to convert a for loop to promise and then wait for each of those promise to resolve so that I can emit changes and close a popup.

Below, is a test code in which I want to print "console.log("Print Before")" first for each iteration and then at the end print "console.log("Print After")" once all iterations are done.

Any help on the syntax for this is really appreciated.

  convertForLoopToPromiseAndWait(someParameterOfTypeObject) {
    for (var test of someParameterOfTypeObject) {
      var testVariable = test.setValue;
      if (testVariable) {         
          dataService.addUpdateEndpointCall();
          console.log("Print Before");    
      }
    }
    console.log("Print After");
    save.emit();
  }

      async addUpdateEndpointCall() {
        const promise1 =  this.dataService.addCall().take(1).toPromise();
        const promise2 =  this.dataService.deleteCall().take(1).toPromise();
    
        await Promise.all([promise1, promise2])
          .then(_ => this.save.emit());
      }


Solution 1:[1]

I think that you have made a mistake here:

const promise1 = await this.dataService.addCall().take(1).toPromise();
const promise2 = await this.dataService.deleteCall().take(1).toPromise();

You await promises. The results put in the variables promise1 and promise2 will then not be promises.

Don't you mean the following?

      async addUpdateEndpointCall() {
        const promise1 = this.dataService.addCall().take(1).toPromise();
        const promise2 = this.dataService.deleteCall().take(1).toPromise();
    
        await Promise.all([promise1, promise2])
          .then(_ => this.save.emit());
      }

Solution 2:[2]

Convert convertForLoopToPromiseAndWait to async method, then you can use await after for keyword and before dataService.addUpdateEndpointCall();

async convertForLoopToPromiseAndWait(someParameterOfTypeObject) {
  for await (var test of someParameterOfTypeObject) {
    var testVariable = test.setValue;
    if (testVariable) {         
      await dataService.addUpdateEndpointCall();
      console.log("Print Before");    
    }
  }
  console.log("Print After");
  await save.emit();
}

Solution 3:[3]

Another way is to make a list of promises and wait for them to resolve:

const promises = [];
        for await (your iterating condition) {
          promises.push(dataService.addUpdateEndpointCall());
        }

then use

await Promise.all(promises).then( this.save.emit());

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 md2perpe
Solution 2 Fatur
Solution 3