HOw can I iterate array of a column angular table

Question

I'm using an angular-material table. I have an array like this:

[ {"name": "name1", "category": [{ "id": "c1", "name":"cat1"}, {"id": "c2", "name":"cat2"]}]

I have this code in the component.ts:

export class ListComponent implements OnInit {

  displayedColumns: string[] = ['name', 'category'];
  dataSource: any;

  constructor( private itemService: ItemService ) { }

  ngOnInit(): void {

    this.listService.getAllItems().subscribe(
      res => {
        this.dataSource = new MatTableDataSource(res);
      }
    )
  }

}

This is the html:

  <mat-card>
    <table mat-table [dataSource]="dataSource" 
           class="mat-elevation-z8"
    >

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

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

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

      <!-- Row shown when there is no matching data. -->
      <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell" colspan="3"></td>
      </tr>
    </table>
    
  </mat-card>

My point is the element category is showed like an object and I want to be showed all items of the array instead [object]. I want to be showed all items of categories separated by commas. How can I do that?

I want the categories be shown like this:

Name1     cat1, cat2, cat3
Name2     cat1, cat2, cat3, cat4
Name3     ca1, and so on.

Answer 1

In your template you can do the following

  <mat-card>
    <table mat-table [dataSource]="dataSource" 
           class="mat-elevation-z8"
    >

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

      <!-- Category Column -->
      <ng-container matColumnDef="category">
        <th mat-header-cell *matHeaderCellDef> Category </th>
        <td mat-cell *matCellDef="let element" > 
            <span *ngFor="let cat of element.category">{{cat.name}} , </span>
        </td>
      </ng-container>

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

      <!-- Row shown when there is no matching data. -->
      <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell" colspan="3"></td>
      </tr>
    </table>
    
  </mat-card>

Answer 2

You didnt specify how you want to show the items in your array, if, for example, you want to show the names separated by comma, you can do something like:

  <ng-container matColumnDef="category">
    <th mat-header-cell *matHeaderCellDef> Category </th>
    <td mat-cell *matCellDef="let element" > {{element.category.map(c => c.id).join(", ") }} </td>
  </ng-container>

the more angular way to do this would be using a pipe, a simple version (only the join part), would be something like:

@Pipe({
  name: "join"
})
export class JoinPipe implements PipeTransform {
  transform(input: Array<any>, sep = ", ", map: string): string {
    return input.map(i => i[map]).join(sep);
  }
}

usage would be like:

<td mat-cell *matCellDef="let element" > {{ element.category |join:', ':'name' }} </td>

here is a demo