lodash获取按键分组的元素数组

Question

我有一个API调用返回的JSON数组

[{
    "id": 1,
    "name": "aa",
    "zone": 1

}, {
    "id": 2,
    "name": "bb",
    "zone": 1

}, {
    "id": 3,
    "name": "cc",
    "zone": 2

}, {
    "id": 3,
    "name": "dd",
    "zone": 2
}
]

通过使用lodash，我_.groupBy(myData,'zone')得到了一个对象，其中包含2个数组，每个数组用于一个不同的区域。但是我需要实现的是，在一个包含区域数组并且每个区域都有一个关联名称数组的对象中。

所需结果：

[
   {
      "zone": "1",
      "items": [
         {
            "id": 1,
            "name": "aa",
            "zone": 1
         },
         {
            "id": 2,
            "name": "bb",
            "zone": 1
         }
      ]
   },
   {
      "zone": "2",
      "items": [
         {
            "id": 3,
            "name": "cc",
            "zone": 2
         },
         {
            "id": 3,
            "name": "dd",
            "zone": 2
         }
      ]
   }
]

是否可以使用lodash将原始数组转换为我需要的数组？稍后在我的Angular模板中，我想做一个*ngFor='let zone of zones'或类似的操作

Answer 1

假设您这样做：

result = _.groupBy(myData,'zone')

只需在lodash函数之后 添加以下代码：

result = Object.keys(result).map(key => ({ zone: key, items: result[key] }));

然后您会得到：

 [
   {
      "zone": "1",
      "items": [
         {
            "id": 1,
            "name": "aa",
            "zone": 1
         },
         {
            "id": 2,
            "name": "bb",
            "zone": 1
         }
      ]
   },
   {
      "zone": "2",
      "items": [
         {
            "id": 3,
            "name": "cc",
            "zone": 2
         },
         {
            "id": 3,
            "name": "dd",
            "zone": 2
         }
      ]
   }
]