rxjs operators, how to return nested data in a single object?

Question

I'm unable to find a clean way of fetching nested data the rxjs way.

There's an observable returning all users and an observable returning all posts given a user id.

getUsers(): Observable<User[]>

and

getPosts(id: string): Observable<[]>

How would I return a list of users including their posts?

At the moment I prepare the data using 2 nested subscriptions.

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

I would rather use operators something like this. But how can i return users including their posts?

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

Look at this answer: stackoverflow.com/a/65024604/1974681 :) — adrisons
– adrisons, Commented Nov 30, 2020 at 16:11

MoxxiManagarm · Accepted Answer · 2020-11-30 14:26:09Z

2

An inner pipe helps to extend the user by his posts.

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(/* ... */);

edited Nov 30, 2020 at 14:26

answered Nov 30, 2020 at 12:19

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

F.H. Over a year ago

Would the subscribe catch errors thrown by the inner pipe?

Mrk Sef Over a year ago

@F.H. Pipe is just linking together (free-point-style) one or more curried functions. So what you need to know is if forkJoin() errors when it's inner observables error. The answer is yes it does. If any of the inner observables error, you never get a result from forkJoin, just the error.

MoxxiManagarm Over a year ago

You can additionally handle errors with the rxjs catchError operator, I extended my answer

Collectives™ on Stack Overflow

rxjs operators, how to return nested data in a single object?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related