Question

我想按以下数组中的BreakdownPalletID分组并显示数据。我正在使用Typescript / Angular并希望显示按Breakdown Pallet ID分组的数据，然后为每个显示每个LP和Skus的列表，但是我不确定如何以JSON对象的方式进行操作下面。 BreakingPalletID的数量也是动态的

 {
        "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

您可以执行以下操作，而无需导入任何其他库：

 // 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)
        });
    });

其中“ this.source”是您的原始对象。输出是可以与* ngFor一起使用的对象数组。

See demo

Answer 2

您可以尝试这样的事情。

let waitForAnyKey = async {
  do!
    Task.Run (fun () ->
      printfn "%s" "waiting for a key"
      Console.ReadKey () |> ignore
      printfn "%s" "got a key"
    )
    |> Async.AwaitTask
}

See demo

Answer 3

如果您想使用lodash或下划线之类的库来简化生活！

带下划线的示例：

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

将为您提供如下结果：

    {
  "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
    }
  ]
}

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

3 个答案: