Unable to filter the nested object in Angular 7 using Primeng Turbo Table

Question

I was trying to display nested objects returned from web api in json format into the turbo table i.e p-table, a Primeng component. After successful displayed all the data, I tried with column filter, in which I managed to filter out the parent object but now struggling to filter the child or nested objects in the array.

Below is that I've done so far.

SubscriptionlistComponent.ts

loadAllSubscriptions(): any {
this.spinner.show();

this.subscriptionService.getAllSubscriptions().subscribe(data => {
  //subscription.lstSubscription = data;
  this.subscriptionLst = data;
  //console.log(this.subscriptionLst);
  //this.lstsubscriptions = this.filter.valueChanges.pipe(
  //  startWith(''),
  //  map(text => this.search(text, this.pipe, this.datepipe))
  //);

  this.totalSubscriptions = data.length;
  this.spinner.hide();
});

FilterUtils['custom'] = (value, filter): boolean => {
  if (filter === undefined || filter === null || filter.trim() === '') {
    return true;
  }

  if (value === undefined || value === null) {
    return false;
  }

  return parseInt(filter) > value;
}

this.cols = [
  { field: 'DateTime', header: 'Date' },
  { field: 'Driver', subfield: 'FirstName', header: 'Driver' },
  { field: 'paymentMode', subfield : 'Title', header: 'Mode' },
  { field: 'startDate', header: 'Start Date' },
  { field: 'endDate', header: 'End Date' },
  { field: 'Amount', header: 'Amount' }
];
}

And this is my component.html code

<div class="content-section implementation ui-fluid">
  <p-table #dt [columns]="cols" [value]="subscriptionLst" 
  [paginator]="true" [rows]="10">
    <ng-template pTemplate="caption">
     <div style="text-align: right">
     <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
    <input type="text" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
  </div>
</ng-template>
<ng-template pTemplate="header" let-columns>
  <tr>
    <th *ngFor="let col of columns">
      {{col.header}}
    </th>
  </tr>
  <tr>
    <th *ngFor="let col of columns" [ngSwitch]="col.field">
      <input *ngSwitchCase="'DateTime'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
      <div *ngSwitchCase="'Driver'" [ngSwitch]="col.subfield">
        <input *ngSwitchCase="'FirstName'" pInputText type="text" (input)="dt.filter($event.target.value, col.subfield, 'contains')">
      </div>
      <div *ngSwitchCase="'paymentMode'" [ngSwitch]="col.subfield">
        <input *ngSwitchCase="'Title'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
      </div>
      <input *ngSwitchCase="'startDate'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
      <input *ngSwitchCase="'endDate'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
      <input *ngSwitchCase="'Amount'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
    </th>
  </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
  <tr [pSelectableRow]="rowData">
    <td *ngFor="let col of columns">
      <div *ngIf="col.subfield;then nested_object_content else normal_content"></div>
        <ng-template #nested_object_content>
          {{rowData[col.field][col.subfield]}}
        </ng-template>
        <ng-template #normal_content>
          {{rowData[col.field]}}
        </ng-template>
    </td>
  </tr>
</ng-template>
 </p-table>
</div>

Answer 1

I figured out issue by my own self. Hopefully this would help others who would tackle with this situation.

All I just had to do was replace the col.subfield with the actual object and nested object name.

Replace

dt.filter($event.target.value, col.subfield, 'contains')

with

dt.filter($event.target.value, 'Driver.FirstName', 'contains')

Switch Case

<div [ngSwitch]="col.subfield">
  <input *ngSwitchCase="'FirstName'" pInputText type="text" (input)="dt.filter($event.target.value, 'Driver.FirstName', 'contains')">
</div>

And that's it...