{
"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": "Coolant Oil",
"VehicleNumber": "AN 32 GB 3572",
"value": "600"
}
]
}
Looking for help to bind vehicle registration numbers and values in corresponding columns using PrimeNG. The JSON data is grouped by the vehicle registration number, which makes it challenging. Any suggestions on how to work with this format would be appreciated.
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: https://i.sstatic.net/dWwFr.png