operatory rxjs, jak zwrócić zagnieżdżone dane w jednym obiekcie?
Nov 30 2020
Nie mogę znaleźć czystego sposobu pobierania danych zagnieżdżonych w sposób rxjs.
Istnieje obserwowalne zwracanie wszystkich użytkowników i obserwowalne zwracanie wszystkich postów z podanym identyfikatorem użytkownika.
getUsers(): Observable<User[]>
i
getPosts(id: string): Observable<[]>
Jak zwrócić listę użytkowników wraz z ich postami?
W tej chwili dane przygotowuję korzystając z 2 zagnieżdżonych subskrypcji.
nestedFetch() {
this.service.getUsers()
.subscribe(
res => {
res.forEach((user) => {
this.service.getPosts(user.Id).subscribe(
posts => {
user.posts = posts;
this.users.push(user);
},
err => console.log('something went wrong: ' + err)
)
})
},
err => console.log('something went wrong: ' + err)
);
}
Wolałbym raczej użyć takich operatorów. Ale jak mogę zwrócić użytkowników wraz z ich postami?
nestedFetch() {
this.service.getUsers().pipe(
map(users => users.map(u => this.membership.getPosts(u.id))),
mergeMap(posts => forkJoin(posts))
).subscribe(
res => this.posts = posts, //returns only posts but not users
err => console.log('something went wrong: ' + err)
)
}
Odpowiedzi
2 MoxxiManagarm Nov 30 2020 at 19:19
Wewnętrzna rura pomaga wydłużyć użytkownika o jego posty.
this.service.getUsers().pipe(
switchMap(users => {
const postsRequests$ = this.users.map(user => this.service.getPosts(user.id).pipe( // example for a error catch which would lead to an empty array not breaking the forkJoin // catchError(err => of([])), map(posts => ({ ...user, posts })), )); return forkJoin(postsRequests$);
}),
).subscribe(/* ... */);