[SOLVED] How to display/filter nested JSON properly?

[warlockn]

Hi, I have nested JSON object which I would like to display and filter as well.

Here's the format I have:

Code: Select all

{
        id: 0,
        username: `user`,
        role: {
          id: 0,
          name: 'admin'
        },
        city: {
          id: 0,
          name: `city_test`
        },
        country: {
          id: 0,
          name: `country_test`
        }
      }

and the grid:

Code: Select all

<p-dataTable #dataTable [resizableColumns]="true" [value]="datasource" [rows]="10" [rowsPerPageOptions]="[5,10,20]" [paginator]="true"
  [pageLinks]="3" [responsive]="true" [rowHover]="true" [rowStyleClass]="onRowRender" [loading]="loading" [lazy]="false" (onLazyLoad)="lazyLoad($event)"
  [totalRecords]="totalRecords">

  <p-column field="username" header="username" [filter]="true" filterPlaceholder="Search">
  </p-column>

  <p-column field="role" header="role" [filter]="true" filterPlaceholder="Search" filterMatchMode="in">
    <ng-template let-user="rowData" pTemplate="body">
      {{user.role.name}}
    </ng-template>
  </p-column>

  <p-column field="city" header="city">
    <ng-template let-user="rowData" pTemplate="body">
      {{user.city.name}}
    </ng-template>
  </p-column>

  <p-column field="country" header="country">
    <ng-template let-user="rowData" pTemplate="body">
      {{user.country.name}}
    </ng-template>
  </p-column>

  <p-column header="actions" styleClass="col-button">
    <ng-template let-col let-user="rowData" pTemplate="body">
      <button type="button" pButton class="ui-button-warning" icon="fa fa-fw fa-pencil-square-o" (click)="editUser(user)"></button>
      <button type="button" pButton class="ui-button-danger" icon="fa fa-fw fa-close" (click)="deleteUser(user)"></button>
    </ng-template>
  </p-column>

</p-dataTable>

Now I want to be able to filter the roles when I type 'admin' but it displays nothing. I even tried to put '0' but still no luck.

Any thoughts?

[warlockn]

I also tried to flatten nested object but now I'm unable to display on the table.

flattened object:

Code: Select all

{
  id: 0,
  city.id: 0,
  city.name: "city_0",
  country.id: 0,
  country.name: "country_0",
  role.id: 0,
  role.name: "admin",
  username: "user_0"
}

and for example to show role name, I'm doing this

Code: Select all

<p-column field="role.name" header="role" [filter]="true" filterPlaceholder="Search"></p-column>

But it does not display anything. Is this bug?

[sudheer]

The nested structure is similar to Tree/TreeTable implementation and AFAIK, It won't work with dataTable. But it should work with flatten object. I will try it once.

[warlockn]

Hi, thanks for the reply.

I've managed it in a regular way (would be great if it can be added in docs as well).

I used normal nested JSON without flattening and in <p-column> tag, I add field="object.property" which displays and also filters value well.

e.g

Code: Select all

<p-column field="role.name" header="role" [filter]="true" filterPlaceholder="Search"></p-column>

JSON (not flattened):

Code: Select all

{ role: { id: 0, name: 'client' } }

[sudheer]

That's great to hear. It is difficult to document all the usecases. I will blog it today.Thanks.

[sudheer]

Just now I blogged about this usage here http://sudheerjonna.com/blog/2017/07/06 ... datatable/

[warlockn]

Good to know!

[dmsaravanan]

Are you guys sure the Dot notation is working user.country.name??? Its not working for me
<p-column field="country" header="country">
<ng-template let-user="rowData" pTemplate="body">
{{user.country.name}}
</ng-template>
</p-column>

[bdubose]

This probably works fine for hard coded columns in the template, but when using it with Angular and having the columns defined in the typescript file things are a bit different. Took me forever to figure out, but trial and error got me there.

Say for instance you have the columns in the TS file like this. Pay attention to "Student.FirstName", this is just code derived from my actual project. Student being an Object in your JSON output and FirstName being a property thereof.

TS file:

Code: Select all

this.cols = [           
            { field: 'Student.FirstName', header: 'First Name'},            {
            { field: 'LastModifiedBy', header: 'Modified By' },
            { field: 'LastModifiedUtcDate', header: 'Modified Date' }
        ];

Then in the template or HTML file to access this value AND be able to search on it you need to have it set up like this.

Code: Select all

<ng-template pTemplate="body" let-course let-columns="columns">
  <tr>            
	  <td *ngFor="let col of columns">
		  <ng-container *ngIf="col.field === 'CreatedUtcDate';else second">{{course[col.field] | date: 'MM/dd/yyyy'}}</ng-container>
		  <ng-template #second>
			  <ng-container *ngIf="col.field === 'LastModifiedUtcDate';else third">{{course[col.field] | date: 'MM/dd/yyyy'}}</ng-container>
		  </ng-template>
		  <ng-template #third>
			  <ng-container *ngIf="col.field === 'Student.FirstName';else fourth">{{course['Student'].FirstName}}</ng-container>
		  </ng-template>
		  <ng-template #fourth>{{course[col.field]}}</ng-template>              
	</td>
	  <td >
		 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal" (click)="loadModal(course)"> Edit <i class="fa fa-pencil-square-o fa-sm"></i></button>
	  </td>
  </tr>
</ng-template>

I have to evaluate if the column is the Object I need to inspect... then proceed to formatting the output in order to display in the DataTable. 'Student.Firstname' in the col.field allows the search (and probably filter) functionality work. {{course['Student'].FirstName}} actually displays it. It's a bit wonky and probably a bug more or less... but it works for now!!! Happy Coding... I hope this helps someone out. It's a pain to figure out third party bugs and work arounds