In my code, I have a JSON list which I fetch a data using fromFetch(). I can get the data and group it on the console by categoryId. I want to display a table of products only with the categoryId of 2. Right now, I can only display a uniform table without the condition I want. What should I do to achieve what I want?

HTML:

```
<div>
  <table
    mat-table
    [dataSource]="items$ | async"
    class="mat-elevation-z8"
    matSort
  >
    <ng-container matColumnDef="categoryId">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Category Id</th>
      <td mat-cell *matCellDef="let item">{{ item.categoryId }}</td>
    </ng-container>
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
      <td mat-cell *matCellDef="let item">{{ item.name }}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
</div>

```

TS:

```
items$: Observable<Item[]>;
  dataSource: MatTableDataSource<Item>;

  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

  displayedColumns: string[] = ['categoryId', 'name'];

  ngAfterViewInit(): void {
    this.items$ = fromFetch(
      'someitems/data/items.json'
    ).pipe(
      switchMap((response) => {
        return response.json();
      })
    );

    this.items$.subscribe(function (result) {
      const grouped = _.groupBy(result, (res) => res.categoryId);
      this.dataSource = result;
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      console.log(grouped);
    });
  }

```