使用lodash .groupBy.如何为分组输出添加自己的密钥？

Question

我有一个从API返回的示例数据.

我正在使用Lodash _.groupBy将数据转换为我可以更好地使用的对象.返回的原始数据是:

[
    {
        "name": "jim",
        "color": "blue",
        "age": "22"
    },
    {
        "name": "Sam",
        "color": "blue",
        "age": "33"
    },
    {
        "name": "eddie",
        "color": "green",
        "age": "77"
    }
]

我希望_.groupBy函数返回一个如下所示的对象:

[
    {
        color: "blue",
        users: [
            {
                "name": "jim",
                "color": "blue",
                "age": "22"
            },
            {
                "name": "Sam",
                "color": "blue",
                "age": "33"
            }
        ]
    },
    {
        color: "green",
        users: [
            {
                "name": "eddie",
                "color": "green",
                "age": "77"
            }
        ]
    }
]

目前我正在使用

_.groupBy(a, function(b) { return b.color})

这是归还这个.

{blue: [{..}], green: [{...}]}

分组是正确的,但我真的想添加我想要的键(color,users).这有可能用_.groupBy吗？或其他一些LoDash实用工具？

Answer 1

你可以这样做

var data = [{
  "name": "jim",
  "color": "blue",
  "age": "22"
}, {
  "name": "Sam",
  "color": "blue",
  "age": "33"
}, {
  "name": "eddie",
  "color": "green",
  "age": "77"
}];

console.log(
  _.chain(data)
    // Group the elements of Array based on `color` property
    .groupBy("color")
    // `key` is group's name (color), `value` is the array of objects
    .map((value, key) => ({ color: key, users: value }))
    .value()
);

在线演示

注意: Lodash 4.0以后,该.pairs功能已重命名为_.toPairs()

Answer 2

这不简单吗？

var result = _(data)
            .groupBy(x => x.color)
            .map((value, key) => ({color: key, users: value}))
            .value();

Answer 3

其他方式

_.chain(data)
    .groupBy('color')
    .map((users, color) => ({ users, color }))
    .value();

Answer 4

最高投票回答使用Lodash _.chain功能,现在被认为是一种不好的做法 "为什么使用_.chain是一个错误."

以下是从函数式编程角度解决问题的几个方法:

import tap from "lodash/fp/tap";
import flow from "lodash/fp/flow";
import groupBy from "lodash/fp/groupBy";

const map = require('lodash/fp/map').convert({ 'cap': false });

const result = flow(
      groupBy('color'),
      map((users, color) => ({color, users})),
      tap(console.log)
    )(input)

input您要转换的数组在哪里.

Answer 5

谢谢@thefourtheye,您的代码大有帮助.我使用Lodash 4.5.0版从您的解决方案创建了一个通用函数.

function groupBy(dataToGroupOn, fieldNameToGroupOn, fieldNameForGroupName, fieldNameForChildren) {
            var result = _.chain(dataToGroupOn)
             .groupBy(fieldNameToGroupOn)
             .toPairs()
             .map(function (currentItem) {
                 return _.zipObject([fieldNameForGroupName, fieldNameForChildren], currentItem);
             })
             .value();
            return result;
        }

要使用它:

var result = groupBy(data, 'color', 'colorId', 'users');

这是更新的提琴手;

https://jsfiddle.net/sc2L9dby/

Answer 6

使用其他答案看起来不错lodash。

我建议使用 JavaScript 的不同方法，例如Array#reduce、object for storing和??=语法。因此，它只需要O(n)时间复杂度。

• 用于reduce聚合数据。
• logical nullish assignment仅当acc[color]为空( ) 时才进行赋值null or undefined。

const data = [{ "name": "jim", "color": "blue", "age": "22" }, { "name": "Sam", "color": "blue", "age": "33" }, { "name": "eddie", "color": "green", "age": "77" }];

const result = data.reduce((acc, {
  name,
  color,
  age
}) => {
  acc[color] ??= {
    color: color,
    users: []
  };
  acc[color].users.push({
    name,
    color,
    age
  });

  return acc;
}, {});
console.log(Object.values(result));

Answer 7

这是使用lodash 4和ES6的更新版本

const result = _.chain(data)
    .groupBy("color")
    .toPairs()
    .map(pair => _.zipObject(['color', 'users'], pair))
    .value();