Primeng table sorting & filtering based on nested json objects

Question

I am using primeng table in my app to display data in a table. My data has some nested json objects. I am trying to sort & filter the table based on the nested json object but can't figure out a way to do so. Please help. Thanks in advance.

here is my json:

[
   {
      "roll-number":"45",
      "name":"Ron",
      "subject-info":[
         {
            "subject-marks-":"40",
            "subject-name":"English"
         }
      ]
   },
   {
      "roll-number":"46",
      "name":"Daryl",
      "subject-info":[
         {
            "subject-marks":"20",
            "subject-name":"English"
         }
      ]
   }
]

Here is my cols array:

 this.cols = [
      { header: 'Student Name', field: 'name' },
      { header: 'Student Roll No', field: 'roll-number' },
      { header: 'Subject name', field: 'subject-info',subfield:'subject-name' },
      { header: 'Subject marks', field: 'subject-info',subfield:'subject-marks' },
        ];

Here is my template:

    <p-table [columns]="cols" #dt [value]="studentData" >
<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="30" placeholder="Search" (input)="dt.filterGlobal($event.target.value, 'contains')" [value]="dt.filters['global']?.value" style="width:auto">
                
            </div>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns " [pSortableColumn]="col.field " class="row-header ">
                    {{col.header}}
                    <p-sortIcon class=" " [field]="col.field " ariaLabel="Activate to sort " ariaLabelDesc="Activate to sort in descending order " ariaLabelAsc="Activate to sort in ascending order ">
                    </p-sortIcon>
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-data let-columns="columns ">
            <tr class="center-text ">
                <td *ngFor="let col of columns " class="row-cell ">
                    <div *ngIf="col.subfield && data[col.field].length!=0;then nested_object_content else normal_content"></div>
                    <ng-template #nested_object_content>
    
                        {{data[col.field][0][col.subfield]}}
                    </ng-template>
                    <ng-template #normal_content>
                        {{data[col.field]}}
                    </ng-template>
                </td>
            </tr>
        </ng-template>
    </p-table>

Currently if I try to sort based on subject marks or subject name columns, the table gets sorted using the subject-info field since sortcol is col.field. I am trying to sort the table based on subject-marks or subject-name depending on the user.

Filtering by using the value in the above mentioned column also returns an empty response.

Berkin Sansal Berkin Sansal · Accepted Answer · 2020-10-21T11:48:00

You can try to achieve by implementing custom sort and custom filter for table.

Custom Sort (documentation):

<p-table [value]="products3" (sortFunction)="customSort($event)" [customSort]="true">
  <ng-template pTemplate="header">
    <tr>
      <th pSortableColumn="code">Code
        <p-sortIcon field="code"></p-sortIcon>
      </th>
      <th pSortableColumn="name">Name
        <p-sortIcon field="name"></p-sortIcon>
      </th>
      <th pSortableColumn="category">Category
        <p-sortIcon field="category"></p-sortIcon>
      </th>
      <th pSortableColumn="quantity">Quantity
        <p-sortIcon field="quantity"></p-sortIcon>
      </th>
      <th pSortableColumn="price">Price
        <p-sortIcon field="price"></p-sortIcon>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product>
    <tr>
      <td>{{product.code}}</td>
      <td>{{product.name}}</td>
      <td>{{product.category}}</td>
      <td>{{product.quantity}}</td>
      <td>{{product.price | currency: 'USD'}}</td>
    </tr>
  </ng-template>
</p-table>

customSort(event: SortEvent) {
  event.data.sort((data1, data2) => {
    let value1 = data1[event.field];
    let value2 = data2[event.field];
    let result = null;

    if (value1 == null && value2 != null)
      result = -1;
    else if (value1 != null && value2 == null)
      result = 1;
    else if (value1 == null && value2 == null)
      result = 0;
    else if (typeof value1 === 'string' && typeof value2 === 'string')
      result = value1.localeCompare(value2);
    else
      result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;

    return (event.order * result);
  });
}

Custom Filter (documentation):

<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="'price'" pInputText type="text" placeholder="Custom - Greater Than" (input)="dt.filter($event.target.value, col.field, 'custom')">
    </th>
  </tr>
</ng-template>

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

Primeng table sorting & filtering based on nested json objects

1 Answers