How to split an array into arrays by an objects property using javascript?

Question

I currently have an array that resembles the array below:

[
      {id:1,color:'red'},
      {id:2,color:'blue'},
      {id:3,color:'red'},
      {id:4,color:'green'},
      {id:5,color:'blue'},
]

I am looking for the fastest way to get something like below where I could split/sort the array by a property in the object, in this example it would be 'color' :

[
      [
        {id:1,color:'red'},
        {id:3,color:'red'},
      ],[
        {id:2,color:'blue'},
        {id:5,color:'blue'},
      ],[
        {id:4,color:'green'},
    ]
]

I could write a function for this but I was thinking there may be something to do this already in underscore.js, but had no luck finding it.

there is a groupBy function

juvian
– juvian

2014-05-22 20:07:42 +00:00
Commented May 22, 2014 at 20:07 — juvian
– juvian, Commented May 22, 2014 at 20:07

bobthedeveloper · Accepted Answer · 2014-05-22 20:08:08Z

2

You need to use the groupBy function of underscore you can find it in the docs right here.

groupBy_.groupBy(list, iterator, [context])
Splits a collection into sets, grouped by the result of running each value through iterator. If iterator is a string instead of a function, groups by the property named by iterator on each of the values.

[
      {id:1,color:'red'},
      {id:2,color:'blue'},
      {id:3,color:'red'},
      {id:4,color:'green'},
      {id:5,color:'blue'},
]

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

answered May 22, 2014 at 20:08

bobthedeveloper

3,7832 gold badges17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

canon Over a year ago

That doesn't produce the requested output. Though, the OP may be fine dealing with it as is.

Andrew Royce Over a year ago

canon is correct, it returns an object but this should work just as well. Thanks.

DRiFTy Over a year ago

The result of this needs to be wrapped in _.toArray() to get the desired output

Yevgen Safronov · Accepted Answer · 2014-05-22 21:19:44Z

0

You can get the required results using ES5 features without need of third party libraries:

var data = [
      {id:1,color:'red'},
      {id:2,color:'blue'},
      {id:3,color:'red'},
      {id:4,color:'green'},
      {id:5,color:'blue'},
];

var temp = {};
data.forEach(function(item){
    if (temp[item.color]) { 
         temp[item.color].push(item);
     } else {
       temp[item.color] = [ item ]; }   
});

var result = Object.keys(temp).map(function(key){ return temp[key]; });

In order to support older browsers use ES5 shims

answered May 22, 2014 at 21:19

Yevgen Safronov

4,0331 gold badge29 silver badges39 bronze badges

Comments

soloidx · Accepted Answer · 2014-05-23 07:08:49Z

0

You can combine the _.groupBy with the _.toArray function:

var dict = [
      {id:1,color:'red'},
      {id:2,color:'blue'},
      {id:3,color:'red'},
      {id:4,color:'green'},
      {id:5,color:'blue'},
];

var grouped = _.groupBy(dict, function(x){ return x.color; });
var result = _.toArray(grouped);

edited May 23, 2014 at 7:08

answered May 22, 2014 at 20:29

soloidx

7496 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to split an array into arrays by an objects property using javascript?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related