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

Question

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>

Ramesh Reddy · Accepted Answer · 2020-12-29 06:36:48Z

2

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();
}

edited Dec 29, 2020 at 6:36

answered May 28, 2020 at 3:29

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

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

8 Comments

user10860402 Over a year ago

Hello, nothing is showing on the table. also is it checking if the value is true or false? thanks

Ramesh Reddy Over a year ago

@user10860402 - Yes, it should return the services that are true.

user10860402 Over a year ago

It worked now thank you. do you mind if i asked a follow up question? what if i have another property inside services that is "services4: 'string here' ". how can i also show the value of string if it is not null? thank you

Ramesh Reddy Over a year ago

@user10860402 - If the new property has a string as its value then the function will work without any changes because a string is a true value.

user10860402 Over a year ago

i mean show the value of the string if it is not null or empty?

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related