rxjs: load many for many from 2 endpoints and merge into single Observable

Question

I have one endpoint for getting list of users, and another for getting list of apartments for every user:

getUsers() => Observable<User[]>;
getUserApartments(userId) => Observable<Apartment[]>`

How do I merge the data from the two into single observable:

const usersWithApartments$: Observable<{ user: User, apartments: Apartment[] }[]> = getUsers().pipe(
    // users.map(user => { user, apartments: getUserApartments(user.id) }) <-- turn this pseudocode into Rxjs
);

Answer 1

Since getUsers()'s return type is Users[] I'm assuming the desired type is collection of { user: User, apartments: Apartment[]> rather than a single one.

Please consider the below implementation:

class UserApartments {
  user: User;
  apartments: Apartment[];
}

const usersWithApartments$: Observable<UserApartments[]> = getUsers()
  .pipe(
    switchMap(users => forkJoin(
      users.map(user => getUserApartments(user.id).pipe(
        map(apartments => ({ user, apartments }))
      ))
    ))
  );