Angular observable service return foreach array. Need to perform for loop http request

Question

I am trying to get multiple person object from multiple API endpoint.

1st API endpoint returns the names of people. 2nd API endpoint returns person detail information. So I have to do get names first, then loop through each name to get detailed information.

Let's say API's person JSON response will be like: {name:'brad', age:'43'}

I have person.component.ts:

getPersons(): void {
 this.personService.getPeople()
 .subscribe(people => this.people = people);

}

I have person.service.ts:

getPeople(): Observable<Person[]> {
return this.http.get<Person[]>(People_Names_API)
  .toPromise()
  .then(names => names ['name']
    .forEach(personName=> {
      const personDetailUrl = '/person-detail/v2/' + personName;
      this.http.get(personDetailUrl )
        .toPromise()
        .then((res: Person) => {
           return res;
        });
    })
  );

The problem is I can't return a single Observable<Person[]> and the view is always getting undefined.

Please help!

Why are you calling multiple API requests using forEach it might throw 503 error and not a good approach, you could fetch all details of persons and then you can find person from it by its name. — Kamran Khatti
– Kamran Khatti, Commented Sep 16, 2020 at 19:31
@KamranKhatti Above is an example I need to do in that order. — Seong Kim
– Seong Kim, Commented Sep 16, 2020 at 19:37
Even the example is wrong, what you need to do fetch all details and then loop through those details array and filter out with person names. — Kamran Khatti
– Kamran Khatti, Commented Sep 16, 2020 at 19:54
@KamranKhatti I think you misunderstood. You have to provide a person's name to get the detail. The above example is indicating that you have to get all names first so you can provide a name to its API to get the detailed information. Like you have to provide product_id to get the product's detailed information. — Seong Kim
– Seong Kim, Commented Sep 16, 2020 at 20:05
If its for getting only single name record then its fine, what confuse me is getting all names and then getting all details of each name through iteration at once. — Kamran Khatti
– Kamran Khatti, Commented Sep 16, 2020 at 20:11

Wilgert · Accepted Answer · 2020-09-17 05:12:02Z

2

You want to use the mergeMap and forkJoin operators from RxJS to do this:

  getPeople(): Observable<Person[]> {
    return this.http.get<Person[]>(People_Names_API)
      .pipe(
        mergeMap((persons) => forkJoin(persons.map((person) => this.http.get<Person>('/person-detail/v2/' + person.name))),
      ));
  }

Edit: persons.map((person) => this.http.get<Person>('/person-detail/v2/' + person.name)) turns the array of persons that was returned from the first http request into an array of Observables. Each Observable represents a call for one name to the person-detail endpoint.

forkJoin turns this Array of Observables into an Observable that emits the array of persons once all calls to person-detail have completed.

mergeMap merges this result Array into the outer Observable such that our function returns an Observable<Person>.

edited Sep 17, 2020 at 5:12

answered Sep 16, 2020 at 20:11

Wilgert

7061 gold badge6 silver badges24 bronze badges

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

5 Comments

George Stocker Over a year ago

could you provide an explanation of what mergeMap and forkJoin are doing here?

Seong Kim Over a year ago

This code guides me better. But I get an error persons.map is not a function. I have imported 'map' though. import { map, mergeMap, switchMap } from 'rxjs/operators'

Wilgert Over a year ago

persons is supposed to be an array. If it is it will have a .map method. Put a tap(console.log) before the mergeMap in the pipe to find our what you actually have (clearly not an array).

Seong Kim Over a year ago

Thanks! this saved me, and I learned a lot from this!

Seong Kim Over a year ago

@Wilgert Do you know how to fix this issue I have ?

Type 'Observable<unknown[]>' is not assignable to type 'Observable<Person[]>'.   Type 'unknown[]' is not assignable to type 'Person[]'.

It raises a compile error. I tried many things but no luck yet..

Collectives™ on Stack Overflow

Angular observable service return foreach array. Need to perform for loop http request

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related