CODEWITHSUNDEEP
angularangular9mat-table
user10860402
user10860402

Reputation: 1012

Display multiple data array in one column depending on value in material table of Angular 9

I have this data. How to display in table when service value is true? Something like this below.

Table should be:

ID     Services
5      service1,service3

Data:

  {   
    id: 5, 
    services:
    { 
       service1: true, 
       service2: false, 
       service3: true, 
    }
  }

html

      <ng-container matColumnDef="id"> 
        <mat-header-cell *matHeaderCellDef mat-sort-header>QTY</mat-header-cell>
        <mat-cell *matCellDef="let purchaseOrder">{{purchaseOrder.id}}</mat-cell>
      </ng-container>

     <ng-container matColumnDef="services"> 
        <mat-header-cell *matHeaderCellDef mat-sort-header>Equipment Ordered</mat-header-cell>
        <mat-cell *matCellDef="let purchaseOrder">{{purchaseOrder.services}}</mat-cell>
      </ng-container>

Upvotes: 0

Views: 3133

Answers (1)

Ramesh Reddy
Ramesh Reddy

Reputation: 10652

You can use a custom method in your component that filters the services:

getRequiredServices(servicesObject) {
 return Object.keys(servicesObject).filter(service => servicesObject[service]).join();
}

and in your HTML:

<ng-container matColumnDef="services">
  <mat-header-cell *matHeaderCellDef mat-sort-header>Equipment Ordered</mat-header-cell>
  <mat-cell *matCellDef="let purchaseOrder">{{getRequiredServices(purchaseOrder.services)}}</mat-cell>
</ng-container>

update

Modify the method this way fr what you asked in the comments(return a string which has all the truthy properties):

getRequiredServices(servicesObject) {
  return Object.entries(servicesObject).reduce(
    (requiredServices, [key, value]) => {
      if (typeof value === 'boolean' && value) {
        requiredServices.push(key);
      } else if (typeof value === 'string' && value) {
        requiredServices.push(value);
      }
      return requiredServices;
    },
    []
  ).join();
}

Upvotes: 2

Related Questions