javascript - Slå ihop två arrayer av objekt i Angular 8 om objektet i den andra arrayen innehåller id:t för det första objektet i arrayen

Jag försöker slå samman två arrayer av objekt där den första arrayen har en JSON-fil och den andra har samma men den andra innehåller ID:t från den första arrayen av objekt. Jag försöker lägga till den andra arrayen av objekt för varje korrekt objekt i den första arrayen av objekt. Som du kan se har comments ett postId där det vet vilken post det tillhör.

Min json-fil ser ut så här.

{
  "posts": [
    {
      "userId": 1,
      "id": 1,
      "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
      "body": "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto"
    },
    {
      "userId": 1,
      "id": 2,
      "title": "qui est esse",
      "body": "est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla"
    },
    {
      "userId": 1,
      "id": 3,
      "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
      "body": "et iusto sed quo iure voluptatem occaecati omnis eligendi aut ad voluptatem doloribus vel accusantium quis pariatur molestiae porro eius odio et labore et velit aut"
    },
    {
      "userId": 1,
      "id": 4,
      "title": "eum et est occaecati",
      "body": "ullam et saepe reiciendis voluptatem adipisci sit amet autem assumenda provident rerum culpa quis hic commodi nesciunt rem tenetur doloremque ipsam iure quis sunt voluptatem rerum illo velit"
    },
    {
      "userId": 1,
      "id": 5,
      "title": "nesciunt quas odio",
      "body": "repudiandae veniam quaerat sunt sed alias aut fugiat sit autem sed est voluptatem omnis possimus esse voluptatibus quis est aut tenetur dolor neque"
    },

och samma json men med en annan API för att hämta data.

"comments": [
    {
      "postId": 1,
      "id": 1,
      "name": "id labore ex et quam laborum",
      "email": "[email ",
      "body": "laudantium enim quasi est quidem magnam voluptate ipsam eos tempora quo necessitatibus dolor quam autem quasi reiciendis et nam sapiente accusantium"
    },
    {
      "postId": 1,
      "id": 2,
      "name": "quo vero reiciendis velit similique earum",
      "email": "[email ",
      "body": "est natus enim nihil est dolore omnis voluptatem numquam et omnis occaecati quod ullam at voluptatem error expedita pariatur nihil sint nostrum voluptatem reiciendis et"
    },
    {
      "postId": 1,
      "id": 3,
      "name": "odio adipisci rerum aut animi",
      "email": "[email ",
      "body": "consectetur cumque impedit blanditiis non eveniet odio maxime blanditiis amet eius quis tempora quia autem rem a provident perspiciatis quia"
    },
    {
      "postId": 1,
      "id": 4,
      "name": "alias odio sit",
      "email": "[email ",
      "body": "impedit nostrum id quia aut est fuga est inventore vel eligendi explicabo quis consectetur aut occaecati repellat id natus quo est ut blanditiis quia ut vel ut maiores ea"
    },
    {
      "postId": 1,
      "id": 5,
      "name": "vero eaque aliquid doloribus et culpa",
      "email": "[email ",
      "body": "harum non quasi et ratione tempore iure ex voluptates in ratione harum architecto fugit inventore cupiditate voluptates magni quo et"
    },
    {
      "postId": 2,
      "id": 6,
      "name": "et fugit eligendi deleniti quidem qui sint nihil autem",
      "email": "[email ",
      "body": "doloribus at sed quis culpa deserunt consectetur qui praesentium accusamus fugiat dicta voluptatem rerum ut voluptate autem voluptatem repellendus aspernatur dolorem in"
    },
    {
      "postId": 2,
      "id": 7,
      "name": "repellat consequatur praesentium vel minus molestias voluptatum",
      "email": "[email ",
      "body": "maiores sed dolores similique labore et inventore et quasi temporibus esse sunt id et eos voluptatem aliquam aliquid ratione corporis molestiae mollitia quia et magnam dolor"
    },

Jag har skapat en modell och en tjänst för att definiera data och för att hämta data.

export class Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';


@Injectable({
  providedIn: 'root'
})

export class PostService {
  private baseUrl = 'http://localhost:3000/posts';

  constructor(private http: HttpClient) { }

  getPost(id: number): Observable<any> {
    return this.http.get(`${this.baseUrl}/${id}`);
  }

  getPostsList(): Observable<any> {
    return this.http.get(`${this.baseUrl}`);
  }

  deletePost(id: number): Observable<any> {
    return this.http.delete(`${this.baseUrl}/${id}`);
  }

Och detta är komponenten

export class PostsListComponent implements OnInit {
  public posts: Observable<Post[]>;

  constructor(private postsService: PostService) { }

  ngOnInit() {
  this.comments$ = this.commentsService.getCommentsList();
  this.posts = this.postsService.getPostsList();

  this.groupedComments$ = this.comments$.pipe(
  map(comments => lodash.groupBy(comments, 'postId'),
  ));
 }
 }

HTML-kod

<tr class="row" *ngFor="let post of posts | async">
        <td class="col">{{post.title}}</td>
        <td class="col-6">{{post.body}}</td>
        <td class="col"><button (click)="deletePost(post.id)" class="btn btn-danger">Delete</button>
          <button (click)="postDetails(post.id)" class="btn btn-info" style="margin-left: 10px">Details</button>
        </td>
      </tr>

Svar #1

Jag rekommenderar att gruppera kommentarerna efter postId, till exempel med lodash

this.groupedComments$ = this.comments$.pipe(
  map(comments => lodash.groupBy(comments, 'postId')),
);

Då kan du helt enkelt komma åt detta objekt i mallen

<tr class="row" *ngFor="let post of posts | async">
        <td class="col">{{post.title}}</td>
        <td class="col-6">{{post.body}}</td>
        <td class="col">
           <div *ngFor="let comment of groupedComments[post.id]">{{comment}}</div>
        </td>
        <td class="col"><button (click)="deletePost(post.id)" class="btn btn-danger">Delete</button>
          <button (click)="postDetails(post.id)" class="btn btn-info" style="margin-left: 10px">Details</button>
        </td>
      </tr>

(async-pipe groupedComments$ var som helst innan)

Redigerad:

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

interface CommentGroup {
  [key: number]: Comment[];
}

comments$: Observable<Comments[]>;
groupedComments$: Observable<CommentGroup>;