带有 PrimeNG 的表格过滤器

Question

I am trying to implement a filter table ( https://primefaces.org/primeng/#/table/filter ), but the JSON that I receive have many levels, exemple:

{
  "id": "123",
  "categorie": "nice",
  "place": {
    "rank": "first",
    "person": {
      "name": "Joe"
    }
  }
}

And the documentation of the PrimeNG make this in the component:

export class DynamicColumnsDemo implements OnInit {

    cars: Car[];

    cols: any[];

    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.cars = cars);

        this.cols = [
            { field: 'vin', header: 'Vin' },
            { field: 'year', header: 'Year' },
            { field: 'brand', header: 'Brand' },
            { field: 'color', header: 'Color' }
        ];
    }
}

And this on the HTML:

<p-table [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th *ngFor="let col of cols">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td *ngFor="let col of cols">
                    {{car[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

But, How can I put on "field" property a JSON with more levels, exemple:

this.cols = [
  { field: 'place.person.name', header: 'Name' },
];

I already try N ways to do that and I don't know if this is possible...

If anyone can help me, I thanks!

Regards.

Answer 1

Assuming that we'd have the same structure for the Car interface but with an additional nested field, like so:

export interface Car {
  vin?;
  year?;
  brand?;
  color?;
  price?;
  saleDate?;
  owner?: {
    name?;
    age?;
  };
}

And we'd want to search by car.owner.name , the way to do it is by creating a custom filter for that specific column.

The columns are:

this.cols = [
  { field: "vin", header: "Vin" },
  { field: "color", header: "Color" },
  { field: "price", header: "Price" },
  { field: "ownerName", header: "Owner name" } // The field does not matter
];

So the column's content in the HTML file would be:

<ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr [pSelectableRow]="rowData">
        <td *ngFor="let col of columns">
            <ng-container *ngIf="col.field === 'ownerName'; else simpleTemplate">
                {{rowData.owner.name}}
            </ng-container>
            <ng-template #simpleTemplate>
                {{rowData[col.field]}}
            </ng-template>
        </td>
    </tr>
</ng-template>

The filter header content for this specific column:

    <input *ngSwitchCase="'ownerName'" pInputText type="text" 
           placeholder="Custom - Nested object" 
           (input)="dt.filter($event.target.value, 'owner', 'customNestedObj')">

Where 'customNestedObj' is actually a new method appended to the FilterUtils class from the library like so (in constructor/ngOnInit):

 FilterUtils["customNestedObj"] = (value, filter): boolean => {
      value = value.name;
      return FilterUtils.contains(value,filter);
    };

Stackblitz: https://stackblitz.com/edit/primeng-tablefilter-demo-9v5bhg?file=src%2Fapp%2Fapp.component.ts