How to consolidate an Observable with informations by a second calls

Question

For educative purpose, I'm trying to call a service that retrieve a list of Posts, and for each post, I would like to make a another call to this service to get the list of comments.

I'm using the data from https://jsonplaceholder.typicode.com/posts

First here are the models I extracted for this service:

export interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
  comments: PostComment[];
}

export interface PostComment {
  postId: number;
  id: number;
  name: string;
  email: string;
  body: string;
}

And here is my current status. My goal is to have an Observable<Post> with the property comments properly filled.

export class PostCommentsCombination implements OnInit {
  constructor(private http: HttpClient) {}

  posts$?: Observable<Post[]>;

  ngOnInit(): void {
    this.posts$ =this.http.get<Post[]> ('https://jsonplaceholder.typicode.com/posts/').pipe(
      switchMap((posts) =>
        posts.map((post) =>
          this.http.get<PostComment[]>(`https://jsonplaceholder.typicode.com/posts/${post.id}/comments`).pipe(
            map((comments) => {
              post.comments = comments;
              return post;
            })
          )
        )
      )
    );
  }
}

But it says it cannot convert Observable<Observable<Post>> into Observable<Post[]>. I cannot blame him, but I'm not sure how to solve this?

You should be able to convert the `Observable>` into an `Observable` by calling something like `flatMap`. — ziggystar, Sep 15 '21 at 15:10
@ziggystar that would be one part of it, but also, I need this `Observable>` to be transformed in `Observable`. Not sure why I don't have an array anymore — J4N, Sep 15 '21 at 15:18

score 2 · Answer 1 · answered Sep 15 '21 at 15:56

2

I would try something like this:

ngOnInit(): void {

  const postsUrl = 'https://jsonplaceholder.typicode.com/posts/';

  this.posts$ = this.http.get<Post[]>(postsUrl).pipe(
    map(posts => posts.map(post =>
      this.http.get<PostComment[]>(`${postsUrl}${post.id}/comments`).pipe(
        map(comments => ({...post, comments}))
      )
    )),
    switchMap(postObservables => forkJoin(postObservables))
  );
  
}

answered Sep 15 '21 at 15:56

Mrk Sef

7,557
1
9
21

1

Nice, a great alternative to @Joulukuusi thank you! – J4N Sep 16 '21 at 04:58

score 1 · Accepted Answer · answered Sep 15 '21 at 15:37

One could forkJoin the requests to the comments, update the post.comments field and return the post back:

this.posts$ = this.http
  .get<Post[]>('https://jsonplaceholder.typicode.com/posts/')
  .pipe(
    switchMap(posts =>
      forkJoin(
        posts.map(post =>
          this.http
            .get<PostComment[]>(`https://jsonplaceholder.typicode.com/posts/${post.id}/comments`)
            .pipe(map(comments => {
              post.comments = comments;
              return post;
            }))
        )
      )
    )
  );

Demo

Nice! I didn't know about forkJoin and I didn't see it on https://rxmarbles.com/ — J4N, Sep 16 '21 at 04:50

score 0 · Answer 3 · answered Sep 15 '21 at 15:33

posts.map((post) => ...

is basically getting every post and mapping it to an Observable. So you end up with an array of Observables. What you want to do is resolve every Observable in the array to get the output you desire. If you are familiar with promises you want the rxjs equivalent of Promise.all, which is essentially forkJoin - see this post Promise.all behavior with RxJS Observables?

How to consolidate an Observable with informations by a second calls

3 Answers3