RxJS: Modify Observable array before subscribing

Question

I'm fetching data (students via getStudents()) from an API which returns an Observable. Within this result I need to get data from two different tables and combine the result.

Here are my simplified interfaces:

export interface student Student {
   id: string
   name: string,
   school_id: string,
   classroom_id: string
}

export interface school School {
   id: string,
   name: string
}

export interface classroom Classroom {
   id: string,
   name: string
}

I now need to fetch all students and add the respective school and classroom for each student via the foreign keys school_id and classroom_id.

My current approach is something like the following. I know it's unfinished but I can't manage to find the right operator and how to properly use it.

this.getStudents().pipe(
   switchMap(students => {
      student.map(student => forkJoin([
         this.getSchool(student.school_id),
         this.getClassroom(student.classroom_id)
      ]))
   })
)

All of the methods (getStudents(), getSchool(), getClassroom()) return Observables. My goal is to get an array of students with the respective school and classroom data after subscription.

I know how to get it done if I need to fetch a single student (e.g. with getStudent()) and then use combineLatest to combine multiple streams. But when fetching multiple students it's different.

Thank you in advance!

score 2 · Accepted Answer · answered May 04 '21 at 15:29

2

You need to forkJoin the observable array that you get from student.map() and use map to project the result into the required object.

const result$ = getStudents().pipe(
  switchMap((students: Student[]) =>
    forkJoin(students.map(student =>
      forkJoin([
        getSchool(student.school_id),
        getClassroom(student.classroom_id)
      ]).pipe(map(([school, classroom]) => ({
        student,
        school,
        classroom
      }))
    )
  ))
));

answered May 04 '21 at 15:29

Krantisinh

1,579
13
16

Thank you, I had something similar in mind but if I subscribe to result$, it's empty. Also tested via Angular's async pipe. Do I miss a 'return' here? The getStudents() method itself returns values, I've checked that. – Kheber May 04 '21 at 15:58
1

Here's a working demo - https://stackblitz.com/edit/rxjs-phsckj – Krantisinh May 04 '21 at 16:04
Now it's working! I had to make sure that the Observables in the second forkJoin getSchool() and getClassroom() return one value only by using .pipe(take(1)). – Kheber May 05 '21 at 09:13

Daniel Gimenez · Answer 2 · 2021-05-05T13:59:24.897

2

What you can do is to covert the original array result to a stream emitting each student and the construct each record one by one. Once the object is built, you can return it back to a single array result using toArray(). I find doing things this way (flattening a stream that emits arrays to a stream that emits individual elements) easier to manage due to the reduced nesting.

this.getStudents().pipe(
  switchMap(students => students), // emit each element individually
  concatMap(student => // construct the student object.
    forkJoin({
      classRoom: this.getClassroom(student.classroom_id),
      school: this.getSchool(student.school_id),
      student: of(student)
    })
  ),
  toArray() // when all results are built, emit one array result.
);

This technique works best if getStudents() returns a single emission and then completes. If the observable stays open, then toArray() will not emit as it only executes when the source observable completes.

If it does stay open, but you only want the first array emission then adding take(1) or first() at the start of the pipe will do work.

StackBlitz

edited May 05 '21 at 13:59

answered May 04 '21 at 16:07

Daniel Gimenez

18,530
3
50
70

3

+1 I like this approach. Two notes: 1) it isn't necessary to use `of` within `switchMap`. If you return array, it will emit elements individually. 2) I'd suggest `mergeMap` instead of `concatMap` so that multiple calls can be made at the same time. [StackBlitz](https://stackblitz.com/edit/so-67387267?file=index.ts&devtoolsheight=100) – BizzyBob May 04 '21 at 18:58
Ty @BizzyBob, I didn't know returning an array from switchMap would do that, that's was a helpful tip. – Daniel Gimenez May 04 '21 at 21:18
`switchMap` takes a function of the type `(x: T) => Observable | Promise | U[]` like all fattening operators – Aluan Haddad May 05 '21 at 01:46
When using ´toArray()´ my Subscription does not return a result in my case. If I remove ´toArray()´, I get the results but individually and not as an array. However thanks for your solution @DanielGimenez – Kheber May 05 '21 at 09:11
I made the assumption that students only emits one result. If it emits multiple results, and stays open then toArray will never emit. If you only want the first emission from this.getStudents then use take before the switchMap. – Daniel Gimenez May 05 '21 at 13:54

RxJS: Modify Observable array before subscribing

2 Answers2

StackBlitz

Linked