JavaScript - Grouping items into arrays

Question

I have a JavaScript array that is something like this:

var items = [
 { id:1, group:'Produce', name:'Apple', weight: 0.5 },
 { id:2, group:'Produce', name:'Banana', weight: 0.2 },
 { id:3, group:'Meat', name:'Beef', weight: 1.0 },
 { id:4, group:'Meat', name:'Chicken', weight: 0.75 },
 { id:5, group:'Dairy', name:'Milk', weight:1.0 }
];

I want to look through this array and dynamically put them in arrays by their group. I tried the following, however, it didn't work:

var groups = [];
for (var i = 0; i<items.length; i++) {
  var groupName = items[i].group;
  if (groups.includes(groupName) === false) {
    groups[groupName] = new Array();
  }
  groups[groupName].push(items[i]);
}

Basically, I'm trying to create a Hashtable in JavaScript. The key is the group name and the value is an Array of items in that group. However, I've been unsuccessful. What am I missing here?

Thank you so much for your help!

"It didn't work" and "I've been unsuccessful" are not acceptable problem statements. Please clearly define the problem, and make the title describe it. Thanks. — Lightness Races in Orbit
– Lightness Races in Orbit, Commented May 9, 2017 at 20:34

kind user · Accepted Answer · 2017-05-09 20:30:33Z

1

I would suggest you following simple solution.

var items = [
 { id:1, group:'Produce', name:'Apple', weight: 0.5 },
 { id:2, group:'Produce', name:'Banana', weight: 0.2 },
 { id:3, group:'Meat', name:'Beef', weight: 1.0 },
 { id:4, group:'Meat', name:'Chicken', weight: 0.75 },
 { id:5, group:'Dairy', name:'Milk', weight:1.0 }
], obj = {};

items.forEach(c => (obj[c.group] || (obj[c.group] = [])).push(c));

console.log(obj);

answered May 9, 2017 at 20:30

kind user

42k8 gold badges69 silver badges78 bronze badges

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

Comments

Yoann · Accepted Answer · 2017-05-09 20:29:42Z

0

Your groups should be an object.

Then you're testing groups.includes(groupName) but it is an array function, and you're creating an hashtable.

Instead, check if the key exists on the object with groups[groupName] === undefined.

var groups = {};
for (var i = 0; i<items.length; i++) {
  var groupName = items[i].group;
  if (groups[groupName] === undefined) {
    groups[groupName] = new Array();
  }
  groups[groupName].push(items[i]);
}

answered May 9, 2017 at 20:29

Yoann

3,0801 gold badge28 silver badges36 bronze badges

Comments

Nina Scholz · Accepted Answer · 2017-05-09 20:35:12Z

You could use just an object and check if the key exist. If not take a new array.

var items = [{ id: 1, group: 'Produce', name: 'Apple', weight: 0.5 }, { id: 2, group: 'Produce', name: 'Banana', weight: 0.2 }, { id: 3, group: 'Meat', name: 'Beef', weight: 1.0 }, { id: 4, group: 'Meat', name: 'Chicken', weight: 0.75 }, { id: 5, group: 'Dairy', name: 'Milk', weight:1.0 }],
    groups = Object.create(null),          // take a really empty object
    groupName,
    i;
    
for (i = 0; i < items.length; i++) {
    groupName = items[i].group;
    if (!groups[groupName]) {              // check if the key in object exists
        groups[groupName] = [];            // if not, assign an empty array
    }
    groups[groupName].push(items[i]);
}

console.log(groups);

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

chrisbajorin · Accepted Answer · 2017-05-09 20:40:53Z

Another alternative is to use reduce:

var items = [
 { id:1, group:'Produce', name:'Apple', weight: 0.5 },
 { id:2, group:'Produce', name:'Banana', weight: 0.2 },
 { id:3, group:'Meat', name:'Beef', weight: 1.0 },
 { id:4, group:'Meat', name:'Chicken', weight: 0.75 },
 { id:5, group:'Dairy', name:'Milk', weight:1.0 }
];

const grouped = items.reduce((accum, item) => {
	accum[item.group] = accum[item.group] ? accum[item.group].concat(item) : [item];
	return accum;
}, {});

console.log(grouped);

Tremmillicious · Accepted Answer · 2017-05-09 20:46:31Z

I alwasy use lodash or underscore

But however, try this using reduce function

 var items = [
   { id:1, group:'Produce', name:'Apple', weight: 0.5 },
     { id:2, group:'Produce', name:'Banana', weight: 0.2 },
     { id:3, group:'Meat', name:'Beef', weight: 1.0 },
     { id:4, group:'Meat', name:'Chicken', weight: 0.75 },
     { id:5, group:'Dairy', name:'Milk', weight:1.0 }
 ];

 Array.prototype.groupDynamically = function(prop) {
   return this.reduce(function(groups, item) {
     var val = item[prop];
     groups[val] = groups[val] || [];
     groups[val].push(item);
     return groups;
   }, {});
 }

 //Then in your case say

var groups = items.groupDynamically('group');

Collectives™ on Stack Overflow

JavaScript - Grouping items into arrays

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Related