ngFor nested array in JSON used in datatable or datatree?

UI Components for Angular
Post Reply
tengel92
Posts: 28
Joined: 15 Sep 2016, 20:04

20 Sep 2016, 18:02

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
Posts: 3
Joined: 22 Oct 2019, 10:50

22 Oct 2019, 10:52

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

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests