How to show this group by json in PrimeNG table?

Question

{
    "TN 47 AS 7269": [
        {
            "date": "2020-06-11",
            "paramValue": "Fuel consumed",
            "VehicleNumber": "TN 47 AS 7269",
            "value": "100"
        },
        {
            "date": "2020-06-11",
            "paramValue": "Engine Oil",
            "VehicleNumber": "TN 47 AS 7269",
            "value": "200"
        },
        {
           "date": "2020-06-11",
            "paramValue": "Coolent Oil",
            "VehicleNumber": "TN 47 AS 7269",
            "value": "300" 
        }  
    ],
    "AN 32 GB 3572": [
        {
            "date": "2020-06-11",
            "paramValue": "Fuel consumed",
            "VehicleNumber": "AN 32 GB 3572",
            "value": "300"
        },
        {
            "date": "2020-06-11",
            "paramValue": "Engine Oil",
            "VehicleNumber": "AN 32 GB 3572",
            "value": "400"
        },
        {
            "date": "2020-06-11",
            "paramValue": "Coolent Oil",
            "VehicleNumber": "AN 32 GB 3572",
            "value": "600"
        }
    ]
}

I need to bind vehicle Registration number and value in corresponding columns by using PrimeNG. If I pass a normal array list means the data are showing well. But this json is grouped by vehicle registration number from backend. I have no idea how to do. Can I get help on this?

HTML:

<p-table #tt [columns]="cols" [value]="vehicles" [rows]="10" [paginator]="true" [showCurrentPageReport]="true" 
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[10,25,50]">

// For Column Header:
<ng-template pTemplate="header" let-columns>
 <tr><th style="width: 10%;" class="text-center">S.No</th>
  <th *ngFor="let col of columns" [style.width]="col.width" [pSortableColumn]="col.field" class="text-center">
        {{col.header}}
 <p-sortIcon *ngIf="col.field" [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>

// For Table Value:
<ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
  <tr>
     <td class="text-center">{{rowIndex+1}}</td>
     <td *ngFor="let col of columns" class="text-center">
     <div *ngIf="col.field">
     <span [ngSwitch]="col.field">
     <span *ngSwitchDefault>{{rowData|field:col}}</span>
     </span>
     </div>
     </td>
   </tr>
</ng-template>
</p-table>

TS:

cols = [
    { field: 'VehicleNumber', header: 'Vehicle Registration Number' },
    { field: 'value', header: 'Fuel Consumed' },
    { field: 'value', header: 'Engine Oil' },
    { field: 'value', header: 'Coolent Oil' },
    
  ];

SampleTable Image:

score 1 · Accepted Answer · answered Nov 06 '20 at 09:03

You have to transform your JSON data from your backend like this for instance:

this.vehicles = Object.keys(data).map(key => {
  return {
    vehicleNumber: key,
    fuelConsumed: data[key][0].value,
    engineOil: data[key][1].value,
    coolentOil: data[key][2].value
  };
});

Your cols definition is weird, I would rather define it like this:

this.cols = [
  { field: "vehicleNumber", header: "Vehicle Registration Number" },
  { field: "fuelConsumed", header: "Fuel Consumed" },
  { field: "engineOil", header: "Engine Oil" },
  { field: "coolentOil", header: "Coolent Oil" }
];

See StackBlitz

How to show this group by json in PrimeNG table?

1 Answers1