Loop over typescript Array asynchronously

Question

I have a typescript array this.products I need to loop over the elements of the array and for each element send parameters to Angular service which makes an API call and gets an answer to the client as an Observable. However, due to asynchronous nature of Observable, my loop finishes before all of the answer are sent back from the server. This is my code:

this.products.forEeach((ele, idx) => {
     this.myService.getSomeDetails(ele.prop1, ele.prop2).subscribe(result => {
         // do something with result 
     });   
});

I need for the loop to advance only after the completion of each observable subscription. How can I implement it? Thanks.

Possible duplicate of Using async/await with a forEach loop

Siyu
– Siyu

2018-12-20 09:51:01 +00:00
Commented Dec 20, 2018 at 9:51 — Siyu
– Siyu, Commented Dec 20, 2018 at 9:51

Davy · Accepted Answer · 2018-12-20 10:17:19Z

4

What you are looking for is forkJoin:

https://rxjs-dev.firebaseapp.com/api/index/function/forkJoin

Map your array of items to an array of api call observables, and pass them into forkJoin. This will emit an array of all your resolved api calls.

Quick and dirty example:

forkJoin(this.products.map(i => this.myService.getSomeDetails(ele.prop1, ele.prop2))).subscribe(arrayOfApiCallResults => {
    // get results from arrayOfApiCallResults
})

answered Dec 20, 2018 at 10:17

Davy

6,4515 gold badges30 silver badges42 bronze badges

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

2 Comments

user4676340 Over a year ago

@dextercom Although it works, it has some limitations : forkJoin works only with observables that have finished emitting (such as HTTP calls), and it does not allow one to listen to every observable separately. Keep those informations in mind when using it, it might save you hours of debugging and head scratching !

dextercom Over a year ago

@trichetriche Thanks, for my application its just what I need. But I will heed your warning.

user4676340 · Accepted Answer · 2018-12-20 09:56:20Z

2

You don't need async/await keywords to make your call in sequence.

import { concat } from 'rxjs';

concat(this.products.map(ele => this.myService.getSomeDetails(ele.prop1, ele.prop2)))
  .subscribe(
    response => console.log(response),
    error => console.log(error),
    () => console.log('all calls done')
  )

answered Dec 20, 2018 at 9:56

user4676340

Comments

Kamil Kiełczewski · Accepted Answer · 2018-12-20 12:51:55Z

0

Try this:

let results = await Promise.all(this.products.map(ele => 
    this.myService.getSomeDetails(ele.prop1, ele.prop2).toPromise()
));

// put code to process results here

Requests are sent parallel. Rememeber to add async keyword in function definition which use above code. More info here.

edited Dec 20, 2018 at 12:51

answered Dec 20, 2018 at 9:51

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

6 Comments

trincot Over a year ago

I would add that await needs to be used within an async function. In that respect you might as well use a normal function and just return Promise.all(promises). It comes down to the same thing.

user4676340 Over a year ago

Going from Observables to Promises is a step back. You don't need to do that if you just want to make sequenced calls.

Kamil Kiełczewski Over a year ago

Combine Promises with Observables is not step back. As you can see when you use promises your code is simpler and less nested (looks like synch code) - this is why I choose this approach.

user4676340 Over a year ago

It is indeed a step back. Promises can't do what observables do (like cancelling for instance) and they add unecessary complexity (async/await is pretty new, not that many people know how to use it, even you made a mistake for the await keyword). As for the nested argument, your code is as nested as any observable, you simply omitted the then keyword. Other than that, you're free to choose whatever approach you feel like using, But I maintain my statement : if you're using observables and go back to promises, you make a step back.

Kamil Kiełczewski Over a year ago

@trichetriche You say that using new JS keywords is step back? In terms of further results processing my code is flat, other solutions are nested. In my code, below ; you can process loaded result directly - in other solutions there is used subscribe which required to put processing code in function (so no directly - and this cause that code is more nested). I dont say that Promieses are better/worse than Observables - but in this case combine botch is better. I don't see my mistake in await keyword - can you point where it is exactly?

|

Maksim Romanenko · Accepted Answer · 2018-12-21 22:02:01Z

0

This is good way to code it.

from(this.products).pipe(mergeMap(
     ele => this.myService.getSomeDetails(ele.prop1, ele.prop2)
)).subscribe(result => {
     () => console.log('.'),
      e => console.error(e),
     () => console.log('Complete')
});

answered Dec 21, 2018 at 22:02

Maksim Romanenko

3651 silver badge7 bronze badges

Collectives™ on Stack Overflow

Loop over typescript Array asynchronously

4 Answers 4

2 Comments

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related