如何为angular / typescript应用显示和过滤此数组？

Question

I'm wanting to group and display the data by BreakdownPalletID in the array below. I'm using typescript/angular and wanting to show this data grouped by Breakdown Pallet ID and then for each show the list of LPs and Skus for each one but i'm not sure how to do that with the JSON object the way it is below. The number of breakdownPalletIDs is also dynamic

 {
        "palletCount": 4,
        "lpCount": 6,
        "Sku": [
            {
                "sku": 394211,
                "lp": "00006844763464291206",
                "breakdownPalletID": 4,
                "customerMessages": ["DO NOT STACK", "DO NOT DO THAT"]

            },
            {
                "sku": 395299,
                "lp": "00006844763464289555",
                "breakdownPalletID": 1,
                "customerMessages": ["MAKE IT 3 HIGH AND LOW"]
            },
            {
                "sku": 460957,          
                "lp": "00006844763464289555",
                "breakdownPalletID": 4,
                    "customerMessages": ["DO NOT STACK", "DO NOT DO THAT"]
            },
            {
                "sku": 460957,      
                "lp": "00006844763464291039",
                "breakdownPalletID": 2,
                "customerMessages": ["MESSAGE 1","MESSAGE 2","MESSAGE 3"]
            },
            {
                "sku": 461716,      
                "lp": "00006844763464291336",
                "breakdownPalletID": 1,
                "customerMessages": ["MAKE IT 3 HIGH AND LOW"]
            },
            {
                "sku": 506733,          
                "lp": "00006844763464289555",
                "breakdownPalletID": 1,
            "customerMessages": ["MAKE IT 3 HIGH AND LOW"]
            },
            {
                "sku": 519795,          
                "lp": "00006844763464291206",
                "breakdownPalletID": 3,
                "customerMessages": ["MESSAGE 5","MESSAGE 6","MESSAGE 7"]

            }
            ]
    } 

Answer 1

You can do something like this, without importing any other library:

 // Build an array of the Pallet IDs
    this.pallets = this.source.Sku.map(item => {
        return item.breakdownPalletID;
    }).filter((item, index, self) => {// Remove duplicate Pallet IDs
        return index === self.indexOf(item);
    });

    // Sort Pallet IDs (optional)
    this.pallets.sort();

    // Create a new array with the items grouped by PalletId
    this.pallets.forEach(pId => {
        this.target.push({
            PalletId: pId,
            Items: this.source.Sku.filter(item => item.breakdownPalletID === pId)
        });
    });

Where, "this.source" is your original object. The output is an array of object you can use with an *ngFor.

See demo

Answer 2

You can try something like this.

  groupBy(origArray: any[], key: string) {
    return origArray.reduce(function (rv, x) {
      (rv[x[key]] = rv[x[key]] || []).push(x);
      return rv;
    }, {});
  }

See demo

Answer 3

If you want to simplify life with libraries like lodash or underscore!

example with underscore:

_.groupBy(this.data.Sku, (item: any) => item.breakdownPalletID);

will give you result like this:

    {
  "1": [
    {
      "sku": 395299,
      "lp": "00006844763464289555",
      "breakdownPalletID": 1
    },
    {
      "sku": 461716,
      "lp": "00006844763464291336",
      "breakdownPalletID": 1
    },
    {
      "sku": 506733,
      "lp": "00006844763464289555",
      "breakdownPalletID": 1
    }
  ],
  "2": [
    {
      "sku": 460957,
      "lp": "00006844763464291039",
      "breakdownPalletID": 2
    }
  ],
  "3": [
    {
      "sku": 519795,
      "lp": "00006844763464291206",
      "breakdownPalletID": 3
    }
  ],
  "4": [
    {
      "sku": 394211,
      "lp": "00006844763464291206",
      "breakdownPalletID": 4
    },
    {
      "sku": 460957,
      "lp": "00006844763464289555",
      "breakdownPalletID": 4
    }
  ]
}