primeng with nested json in angular 4

Question

I am using p-dataTable with following JSON object

skuReportList:any[]= [
    {
      'sku':102,
      'name':'APRON 4WAY',
      'deliveryrange':[
        {'date':'10/12/17','qty':'34','drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/13/17','qty':'34','drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/14/17','qty':'34','drivername':'abc','type':'special request','deliverytime':'10:20'}
      ]
    },
    {'sku':103,'name':'APRON 4WAY',
      'deliveryrange':[
        {'date':'10/12/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/13/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/14/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'}
      ]
    },
    {'sku':104,'name':'APRON 4WAY',
      'deliveryrange':[
        {'date':'10/12/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/13/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/14/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'}
      ]
    },
    {'sku':103,'name':'APRON 4WAY',
      'deliveryrange':[
        {'date':'10/12/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/13/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/14/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'}
      ]
    },
    {'sku':104,'name':'APRON 4WAY',
      'deliveryrange':[
        {'date':'10/12/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/13/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'},
        {'date':'10/14/17','qty':34,'drivername':'abc','type':'special request','deliverytime':'10:20'}
      ]
    },
]

Here is my HTML code for p-dataTable

<p-dataTable *ngIf="showSkuLevelReport" [value]="skuReportList" scrollable="true" scrollHeight="calc(100vh - 390px)"  [paginator]="false" 
    responsive="true" [resizableColumns]="false" [globalFilter]="gb" #dt [rows]="8" class="custom-pagi" [hidden]="inCall">

        <p-column title="sku" field="sku" header="SKU" [style]="{'width':'120px'}" styleClass="border-column" sortable="true"></p-column>
        <p-column title="name" field="name" header="Item Name" styleClass="no-border-column text-left"></p-column>
        <p-column *ngFor="let onecol of deliveryrange;let i = index" [field]="onecol.qty" [header]="onecol.date" [editable]="false" [sortable]="false">
        </p-column>
 </p-dataTable>

I need to get the following output table:

Can anyone help me out to get the corresponding output?

score 0 · Answer 1 · answered Oct 21 '17 at 15:32

You can initialize the delivery columns in a cols array :

for (var i = 0; i < this.skuReportList[0].deliveryrange.length; i++) {
    this.cols.push({ header: 'DELIVERY ' + this.skuReportList[0].deliveryrange[i].date });
}

and then iterate on it :

<p-column *ngFor="let col of cols;let i = index" [header]="col.header">
    <ng-template let-row="rowData" pTemplate type="body">
        <b>{{row.deliveryrange[i].qty}}</b>
    </ng-template>
</p-column>

Here is a working plunkr

Thank you Antikhippe and sorry for the late response – Jellaraj Yadav Oct 29 '17 at 10:05 — Jellaraj Yadav, Oct 29 '17 at 10:05

primeng with nested json in angular 4

1 Answers1