Angular 4, multiple api calls and wait for results

Question

I'm calling service api in loop and then I want to wait for the all results. I'm not sure how can I use Observable.forkJoin here.

Component:

for(let i=0;i<data.length;i++{
    this.component.getData(data[i].id).then((result: any) => {


                })
    }

Service:

getData(parameters:any): Promise<Object> {
    return this.query(parameters)
  }

Possible duplicate of Recursively calling an asynchronous API call — user3155561
– user3155561, Commented Dec 7, 2018 at 20:09
@Knostradamus I don't think there's anything recursive about this. — Jonathan Wilson
– Jonathan Wilson, Commented Dec 7, 2018 at 20:40

Jonathan Wilson · Accepted Answer · 2018-12-07 20:08:49Z

1

The key here is Promise.all, which waits for all promises to resolve before executing your callback.

let promises = data.map(d => this.component.getData(d.id));

Promise.all(promises).then(results => {
  console.log(results);
});

answered Dec 7, 2018 at 20:08

Jonathan Wilson

4,3052 gold badges27 silver badges36 bronze badges

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

2 Comments

user3194721 Over a year ago

We don't need for loop here? for(let i=0;i<data.length;i++{ let promises = data.map(d => this.component.getData(d.id));}

Jonathan Wilson Over a year ago

Ah, you must not be familiar with Array.map. It's functionally equivalent to your original for loop except that it also builds a new array from the values returned from the lambda function passed-into it. In this case, the lambda function passed to map returns a promise, so map returns an array of promises.

Collectives™ on Stack Overflow

Angular 4, multiple api calls and wait for results

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