How to consolidate an Observable with informations by a second calls-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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?