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.

Can you please add your template code so we can help you

Taha Zgued
– Taha Zgued

2021-04-16 21:56:26 +00:00
Commented Apr 16, 2021 at 21:56 — Taha Zgued
– Taha Zgued, Commented Apr 16, 2021 at 21:56
Hello. I have added the template. Thanks your your help.

cabita
– cabita

2021-04-16 23:22:13 +00:00
Commented Apr 16, 2021 at 23:22 — cabita
– cabita, Commented Apr 16, 2021 at 23:22

Taha Zgued · Accepted Answer · 2021-04-19 13:03:43Z

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>

answered Apr 19, 2021 at 13:03

Taha Zgued

1,10812 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Moshezauros Over a year ago

a pipe is a lot less wasteful

Taha Zgued Over a year ago

@Moshezauros true thanks, didn't came to mind. was looking for the simpler answer

Moshezauros · Accepted Answer · 2021-04-18 12:46:13Z

0

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

edited Apr 18, 2021 at 12:46

answered Apr 17, 2021 at 5:18

Moshezauros

2,5931 gold badge14 silver badges17 bronze badges

1 Comment

cabita Over a year ago

Hello. I want to show the items separated by commas. When I put element.category.map(c=> c.id).join(", ") appears the next error: Parser Error: Bindings cannot contain assignments at column 26 in [ {{ element.category.map(c => c.id).join(", ") }} ]

Collectives™ on Stack Overflow

HOw can I iterate array of a column angular table

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related