Item Array as Datasource for NgFor

Question

Just want to ask if is it possible to search an item in an array of objects and use it as datasource for my angular table? Can you share the syntax please?

Basically, i have an array of objects consisting of Id and its json file. Populate its data. Look for an item that matches the it, and use it as datasource in a ngfor grid.

I have the following code, but it returns compilation error.

Thanks

ts file

jsonData: Array<{ id: string, json: object }> = [];
ngOnInit(): void {
let json= [
  {
    "Id": "1",
    "Col1": "val11",
    "Col2": "val12
  },
  {
    "Id": "2",
    "Col1": "val21",
    "Col2": "val22
  }
]

this.jsonData.push({ id: "100", json: json });
}

html file

<ng-container *ngFor="let row of this.jsonData.find(e => e.id === "101").json;let i=row.Id">
        row.Col1 //etc..
</ng-container>

Answer 1

I Have used a different approach check if this helps you out . I am filtering data from the constructer itself (ts file)

here is the code link https://stackblitz.com/edit/angular-wn7vwb?file=app%2Ftable-basic-example.ts

HTML

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

ts

import { Component } from '@angular/core';

const ELEMENT_DATA: PeriodicElement[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
];

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  displayedColumns = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;

  constructor() {
    this.dataSource = this.dataSource.filter((res) => res.name == 'Helium');
  }
}

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}