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

Answer 2

你可以这样做：

let zones = _.chain(_.groupBy(myData, 'zone')).map(function (val, key) {
    return {
        zone: key,
        names: _.map(val, "name") // Assuming you only need names. You can have the whole object too if needed
    };
}).value();

这将产生：

[
    {
        "zone": "1",
        "names": ["aa", "bb"]
    },
    {
        "zone": "2",
        "names": ["cc", "dd"]
    }
]

Answer 3

如果您希望创建一个 JSON 对象，其中包含一些具有 zone 值的键和对应的 names 作为分配给该键的数组， 您可以使用 lodash 的 reduce 功能。只需这样做：

_.reduce(myData, function(result, value, key) {
    (result[value.zone] || (result[value.zone] = [])).push(value.name);
    return result;
  }, {});

代码会产生：

{"1":["aa","bb"],"2":["cc","dd"]}

var myData = [{
  "id": 1,
  "name": "aa",
  "zone": 1

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

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

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

console.log(JSON.stringify(
  _.reduce(myData, function(result, value, key) {
    (result[value.zone] || (result[value.zone] = [])).push(value.name);
    return result;
  }, {})
));

<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>

在这里您可以找到reduce 的 lodash 文档： https://lodash.com/docs/4.17.4#reduce

Answer 4

下面是我对你想要的实现，虽然没有 Lodash（至少我认为它是你想要的。结果是一个数组数组，每个内部数组包含特定区域的每个原始对象）。

let originalArray = [{
    "id": 1,
    "name": "aa",
    "zone": 1

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

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

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

let transitionObject = {};

for (let i = 0; i < originalArray.length; i++) {
  let currentObject = originalArray[i];
  transitionObject[currentObject.zone] = transitionObject[currentObject.zone] || { names: []};
  transitionObject[currentObject.zone].names.push(currentObject.name);
}

console.log(transitionObject);