ngFor nested array in JSON used in datatable or datatree?

[tengel92]

This is definitely a struggle point for me in Angular2. I need to iterate through a pretty deep nested array. I'd like for users to be able to search, sort, filer, and export as CSV using either datatable or data tree. Here is the json

Code: Select all

{
   "PurchaseShipmentHeaders": [   {
      "ShipmentID": 1,
      "ShipmentType": "Receipt",
      "VehicleNum": "truck1234",
      "DateShipped": "2016-09-15",
      "ChangeVersionID": 0,
      "ShipHeaderStatusId": 1,
      "OrgID": 36361,
      "PackingList": null,
      "WayBillNum": null,
      "PurchaseShipLine": [      {
         "ShipmentID": 1,
         "ShipmentLineID": 1,
         "AllocationID": 79303,
         "ShipLineStatusID": 1,
         "POID": 1,
         "BizType": "B ",
         "PurchaseShipLineWeight": [         {
            "WgtTypeCode": "DW",
            "AccountID": 942428,
            "AccountWgtRefID": "12",
            "GrossWgtLB": 79220,
            "TareWgtLB": 33780,
            "CleanTareWeight": 0,
            "NetWgtLB": 45440,
            "BizType": "B "
         }],
         "PurchaseShipLineAddtlCharge": null
      }],
      "PurchaseShipmentHeaderAddtlCharge": null,
      "CreatedDate": "2016-09-15T18:45:10.3270000-04:00",
      "LastUpdatedDate": "2016-09-15T18:45:10.3270000-04:00",
      "BizType": "B "
   }],
   "CallingClientID": null,
   "ValidationMessages": null,
   "ApplicationID": 974,
   "APICallBatchID": 0
}

I understand a little bit about ngFor but can't get past PurchaseShipLine. I also can't figure out how to get template to work in the datable. I have this just sitting below my datatable. The code below works and at least gives me the data but it's not sortable, or searchable and won't show up in the export CSV of course

Code: Select all

<template ngFor [ngForOf]="shipments" let-shipment>
  <div>{{shipment.ShipmentID}}</div>
  <li *ngFor="let PurchaseShipLine of shipment.PurchaseShipLine">
    {{PurchaseShipLine.AllocationID}}
  </li>
  <li *ngFor="let PurchaseShipLine of shipment.PurchaseShipLine">
    {{PurchaseShipLine.POID}}
  </li>
</template>

I have tried something like this too which probably isn't close to right. Any ideas or help are greatly appreciated! Thanks!

Code: Select all

<p-dataTable #exportCSV [value]="shipments" [rows]="25" [paginator]="true" [rowsPerPageOptions]="[25,50,100]" [globalFilter]="globalFilter" resizableColumns="true" reorderableColumns="true" expandableRows="true">
    <p-column field="ShipmentID" header="Shipment ID" [sortable]="true" [filter]="true" filterMatchMode="contains"></p-column>
    <p-column field="ShipmentType" header="Shipment Type" [sortable]="true" [filter]="true" filterMatchMode="contains"></p-column>
    <p-column field="VehicleNum" header="Vehicle Num" [sortable]="true" [filter]="true" filterMatchMode="contains"></p-column>
    <p-column field="AllocationID" header="Allocation ID">
      <template let-col let-shipment="rowData" pTemplate type="body">
            <span>{{shipment[col.field]}}</span>
        </template>
    </p-column>
    <p-column styleClass="col-button">
        <template pTemplate type="header">
            <button type="button" pButton icon="fa-refresh"></button>
        </template>
        <template let-shipment="rowData" pTemplate type="body">
            <button type="button" pButton icon="fa-search"></button>
        </template>
    </p-column>
</p-dataTable>

[Johanehm]

Did you find any Solution to this? I'm having a similar situation, I Have a huge nested json and need to export everything to a cab and can't find a way to do it. I'm using primeNg 4 datatable