Most performant way to group array items by a field in JavaScript?

Question

I have an array of items which have a date field. I need to group items by dates so that on my page I can render them grouped by this date. Something like this:

Monday 1st:
-event 1
-event 2
Tuesday 2nd:
-event 3

This works but I'm doing quite a lot of looping. Is there a more performant solution? Or is my approach fine? Ive simplified my code but in reality I will have a much larger dataset.

const items=[{name: '1',date: '10 dec'},{name: '2',date: '10 dec'},{name: '3',date: '11 dec' }];

const dates = items.map(item=> item.date)
const datesNoDupe = Array.from(new Set(dates));

const output = datesNoDupe.map(date=>{
  return items.filter(item=>{
    return item.date === date;
  });
})

console.log(output)

https://jsfiddle.net/vn1wLok6/

Answer 1

You can use array#reduce to group your array in single iteration.

const items=[{name: '1',date: '10 dec'},{name: '2',date: '10 dec'},{name: '3',date: '11 dec' }];

var result = items.reduce((r, {name, date}) => {
  r[date] = r[date] || [];
  r[date].push({name,date});
  return r;
},{});

console.log(result);

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