javascript - Grouping elements in array by properties

Question

I am trying to filter same color objects from the below json and every color value is containing combination of two values(color and numeric value) but I just want to filter on the basis of color.

Here what i have tried

var _ = require('underscore-plus');
var data = [{
"name": "jim",
    "color": "blue 1",
    "age": "22"
}, {
"name": "Sam",
    "color": "blue 2",
    "age": "33"
}, {
"name": "eddie",
    "color": "green 1",
    "age": "77"
},
{
"name": "Dheeraj",
    "color": "blue 3",
    "age": "25"
},
{
"name": "Suraj",
    "color": "green 1",
    "age": "25"
}
];

var result=_.groupBy(data,"color");
console.log(result)

Result should be array of Objects having same color.

[{ "name": "jim", "color": "blue 1", "age": "22" },
 { "name": "Sam", "color": "blue 2", "age": "33" },
 { "name": "Dheeraj", "color": "blue 3", "age": "25" }]

and

[{ "name": "Suraj", "color": "green 1", "age": "25" },
 { "name": "eddie", "color": "green 1", "age": "77" }]

Answer 1

You can group the items using Array.prototype.reduce:

var data = [{
  "name": "jim",
  "color": "blue 1",
  "age": "22"
}, {
  "name": "Sam",
  "color": "blue 2",
  "age": "33"
}, {
  "name": "eddie",
  "color": "green 1",
  "age": "77"
}, {
  "name": "Dheeraj",
  "color": "blue 3",
  "age": "25"
}, {
  "name": "Suraj",
  "color": "green 1",
  "age": "25"
}];

var result = data.reduce(function(grouped, obj) {
  var key = obj.color.split(' ')[0]; // get the color from the key
  grouped[key] = (grouped[key] || []).concat(obj); // use the existing array or create a new array, add the object to it, and assign it to the grouped object
  
  return grouped; // return the grouped object
}, {});

console.log(result);

Answer 2

You could group by the color.

var data = [{ "name": "jim", "color": "blue 1", "age": "22" }, { "name": "Sam", "color": "blue 2", "age": "33" }, { "name": "eddie", "color": "green 1", "age": "77" }, { "name": "Dheeraj", "color": "blue 3", "age": "25" }, { "name": "Suraj", "color": "green 1", "age": "25" }],
    grouped = {},
    colors;

data.forEach(function (a) {
    var group = a.color.match(/^[a-z]+/i);
    grouped[group] = grouped[group] || [];
    grouped[group].push(a);			
});
colors = Object.keys(grouped);
colors.forEach(function (color) {
    console.log(color, grouped[color]);
});

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

you can use Jquery.grep() for example

var result = $.grep(data, function(n){ return n.color == "blue 3" })

Answer 4

Simply using the groupBy function as detailed by underscore docs here:

var result = _.groupBy(data, function(datum) { return datum.color; });

You need to provide a function to be used, that will return the attribute to group the elements on, which is color in this case.

If you want to filter instead, as is mentioned in the question, you can use the underscore filter method:

var blueOne = _.filter(data, function(datum){ return datum.color == 'blue 1'; });