Angular nested Observable

Question

I have a fuction inside my service which returns an observable array of entity ids and I have another function, which takes an entity id, with which I can get detailed information of an entity as an observable.

Now I want to requests all entity ids with the first function an then pipe those ids one by one into the second function to get one big observable with all my detailed entity informations.

Just to talk about the same functions:

this.api.getEntities()   -> gets all entity ids

this.api.getEntity(id)   -> gets information of a single entity

This is what i tried so far but its just working with when there is only one entity, with two or more entities id = 1, 2.

this.entities$ = this.api.getEntities().pipe(switchMap(id => this.api.getEntity(id)));

My working solution now is:

this.entities$ = this.api.getEntities().pipe(switchMap(ids => forkJoin(ids.map(id => this.api.getEntity(id)))));

Well, first define the correct types then! They should be `Observable>` and `Observable` probably. — Gaël J, Jun 30 '21 at 18:38
Not really, the answer uses .map on an observable but I can't use .map I have to use .pipe(map( it => ........)) — Debalator, Jun 30 '21 at 18:53
That's the old syntax, just put `map` and `flatMap` inside the `pipe` — Gaël J, Jun 30 '21 at 18:54
okay thanks now it works, I will add my solution now. Maybe that helps someone else later too :) — Debalator, Jun 30 '21 at 18:57

score 1 · Answer 1 · answered Jun 30 '21 at 19:01

1

Inspired by RxJs Array of Observable to Array

return this.api.getEntities()
  .pipe(
    flatMap((ids: Array<number>) => {
      return Observable.forkJoin(
        ids.map((id: number) => this.api.getEntity(id))
      );
    })
  )
  .subscribe((entities: Array<Entity>) => {
    // Do something
  })

answered Jun 30 '21 at 19:01

Gaël J

11,274
4
17
32

flatMap was renamed to mergeMap, but otherwise great answer! – Clashsoft Jun 30 '21 at 19:03

Angular nested Observable

1 Answers1