using lodash .groupBy. how to add your own keys for grouped output?

Question

I have this sample data returned from an API.

I'm using Lodash's _.groupBy to convert the data into an object I can use better. The raw data returned is this:

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

I want the _.groupBy function to return an object that looks like this:

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

Currently I'm using

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

which is returning this.

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

the groupings are correct, but I'd really like to add the keys I want (color, users). is this possible using _.groupBy? or some other LoDash utility?

As of 2024, there is no need to use lodash, underscore.js or alikey anymore, since native groupBy() is now available. — Mushroomator
– Mushroomator, Commented Feb 14, 2024 at 23:28

Julian Gonggrijp · Accepted Answer · 2021-04-05 11:29:36Z

You can do it like this in both Underscore and Lodash (3.x and 4.x).

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() );

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

Original Answer

var result = _.chain(data) .groupBy("color") .pairs() .map(function(currentItem) { return _.object(_.zip(["color", "users"], currentItem)); }) .value(); console.log(result);

Online Demo

Note: Lodash 4.0 onwards, the .pairs function has been renamed to _.toPairs()

Very nifty, but hard to wrap my head around. Can you explain the steps in between, especially the pairing and zipping (and the double zip, since _.object is an alias for _.zipObject).
lodash 3.10.0 and some logging for every step: jsfiddle.net/plantface/WYCF8/171. It's still a puzzle, but I'm getting there. Haven't used _.zip and _.pair so much yet.
In lodash 4.x, the pairs() method does not exist anymore. An updated lodash 4.0 version of this example is: .chain(data).groupBy('color') .toPairs().map(function (pair) { return _.zipObject(['Name', 'Suppliers'], air); }).value();
I feel like loadash should have a function that does this very exact thing. I would think users would want to group an array of objects by a property all the time.

Darragh · Accepted Answer · 2016-10-27 15:40:01Z

128

Isn't it this simple?

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

answered Oct 27, 2016 at 15:40

Darragh

2,6761 gold badge25 silver badges34 bronze badges

3 Comments

Jeremy A. West Over a year ago

This seems much cleaner to me, and appears to be returning the same results. Thanks!

Wei-jye Over a year ago

wow. what syntax is this? First time seeing that you can pass the array into the constructor

Simon_Weaver Over a year ago

Watch out for this: stackoverflow.com/questions/56389864/… if you don't want to import the entire library. I think that means 'flow' is better despite this looking really nice!

Pawel · Accepted Answer · 2018-01-05 13:12:41Z

Highest voted answer uses Lodash _.chain function which is considered a bad practice now "Why using _.chain is a mistake."

Here is a fewliner that approaches the problem from functional programming perspective:

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)

Where input is an array that you want to convert.

I tried to use flow() instead of chain() here, but typescript's type checking simply go crazy with composed functions. I hope we have the same level of support we currently have in RxJS's pipe(), for example, in lodash.
I really like your map() syntax, very cool map((users, color) => ({color, users})) instead of map((value, key) => ({ color: key, users: value }))
The problem of preventing treeshaking only applies to Lodash. In Underscore, you can customize which functions get mixed into _ since version 1.11.

stasovlas · Accepted Answer · 2017-12-12 05:29:45Z

26

another way

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

edited Dec 12, 2017 at 5:29

answered Dec 7, 2016 at 14:54

stasovlas

7,4362 gold badges30 silver badges30 bronze badges

1 Comment

Martin Magakian Over a year ago

Similar to @thefourtheye's answer but a bit easier to understand

Andrew · Accepted Answer · 2017-04-20 14:30:38Z

Thanks @thefourtheye, your code greatly helped. I created a generic function from your solution using the version 4.5.0 of Lodash.

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

To use it:

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

Here is the updated fiddler;

https://jsfiddle.net/sc2L9dby/

Nguyễn Văn Phong · Accepted Answer · 2022-03-23 08:52:10Z

Other answers look good by using lodash.

And I would suggest a different approach by using JavaScript, such as Array#reduce, object for storing and ??= syntax. As a result, it just takes O(n) time complexity.

Using reduce to aggregate data.
Using logical nullish assignment only assigns if acc[color] is nullish (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));

Mushroomator · Accepted Answer · 2024-02-14 23:37:14Z

ES2024

You can now use the built-in Object.groupBy() or Map.groupBy() in conjunction with the good old map(). No need for lodash, underscore.js or alike anymore:

const input = [ { name: "jim", color: "blue", age: "22", }, { name: "Sam", color: "blue", age: "33", }, { name: "eddie", color: "green", age: "77", }, ]; const usersByColor = Object.groupBy(input, (user) => user.color); const result = Object.entries(usersByColor).map(([color, users]) => ({ color, users, })); console.log(JSON.stringify(result, null, 4));

/* Stackoverflow: show only console */ .as-console-wrapper { max-height: 100% !important; top: 0; }

Browser support is ok (~ 82% as of 2024-02-15) but not great yet.

Matt · Accepted Answer · 2017-02-09 20:28:57Z

Here is an updated version using lodash 4 and ES6

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

Alexei - check Codidact · Accepted Answer · 2017-02-22 22:57:42Z

Example groupBy and sum of a column using Lodash 4.17.4

 var data = [{ "name": "jim", "color": "blue", "amount": 22 }, { "name": "Sam", "color": "blue", "amount": 33 }, { "name": "eddie", "color": "green", "amount": 77 }]; var result = _(data) .groupBy(x => x.color) .map((value, key) => ({color: key, totalamount: _.sumBy(value,'amount'), users: value})).value(); console.log(result);

elclanrs · Accepted Answer · 2014-05-12 04:34:37Z

I would suggest a different approach, using my own library you could do this in a few lines:

var groupMe = sequence( groupBy(pluck('color')), forOwn(function(acc, k, v) { acc.push({colors: k, users: v}); return acc; },[]) ); var result = groupMe(collection);

This would a be a bit difficult with lodash or Underscore because the arguments are in the opposite order order, so you'd have to use _.partial a lot.

Christopher · Accepted Answer · 2022-07-17 03:07:33Z

 const groupBy = (array, key, name) => { return array.reduce((result, obj) => { result[obj[key]] = result[obj[key]] || { location: obj[name], child: [], }; // result[obj[key]] ??= { // location: obj[name], // child: [] // }; result[obj[key]].child.push(obj); return result; }, {}); }; const items = [ { id: 1, age: 75, name: 'Kumar', location: 'chennai', }, { id: 1, age: 25, name: 'Christo', location: 'Dindigul', }, { id: 1, age: 28, name: 'SK', location: 'chennai', }, { id: 1, age: 21, name: 'Ram', location: 'chennai', }, { id: 1, age: 21, name: 'ravi', location: 'chennai', }, ]; let obj = groupBy(items, 'age', 'location'); const result = Object.keys(obj).map((key) => [obj[key]][0]); console.log(result);

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Vladyslav Siroshtan · Accepted Answer · 2017-06-02 10:52:09Z

In 2017 do so

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

Collectives™ on Stack Overflow

using lodash .groupBy. how to add your own keys for grouped output?

12 Answers 12

9 Comments

3 Comments

3 Comments

1 Comment

Comments

Comments

ES2024

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

9 Comments

3 Comments

3 Comments

1 Comment

Comments

Comments

ES2024

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Linked

Related