How to combine multiple rxjs observables with a single subscription?

user_3909886 0
Viewed 577

I have an observable to get users, and I then want to do a API calls to get roles for each user, and then combine all the data into a single array of objects for display.

I have gotten to this point, but I think there must be a way for me to combine the roles calls with the users in stream rather than having to subscribe and then combineLatest:

  this.getAllUsersParams$
    .pipe(
      switchMap(params => this.userFacadeService.sysadminGetAllUsers(params)),
      map(allUsers => {
        const rolesCalls: Observable<UserRoles[]>[] = [];

        allUsers.users.forEach(user => {
          rolesCalls.push(this.userFacadeService.getUserRoles(user.id));
        });

        return { allUsers, rolesCalls };
      })
    )
    .subscribe(data => {
      combineLatest(data.rolesCalls)
        .pipe(
          map(userRoles => {
            const userListVM: UserListVM[] = data.allUsers.users.map((user, i) => {
              return {
                ...user,
                roles: userRoles[i],
              };
            });
            return { userListVM, total: data.allUsers.total };
          })
        )
        .subscribe(data => {
          // consume data
        });
    })
observable rxjs angular javascript
1 Answers

Are you looking for something like this?

this.getAllUsersParams$
  .pipe(
    switchMap(params => this.userFacadeService.sysadminGetAllUsers(params)),
    switchMap(allUsers => combineLatest(
      allUsers.users.map(user => combineLatest([
        of(user),
        this.userFacadeService.getUserRoles(user.id),      
      ])
    )),
    map((result): { total: number, userListVM: UserListVM[] } => ({
      total: result.length,
      userListVM: result.map(user => ({
        ...user[0],
        roles: user[1]
      }))
    }))
  )
  .subscribe(data => {
    ...
  });

It pairs each user with their roles, then you can manipulate the data to be the structure you want.

user_9736510
Related