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
});
})
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.