Can anyone suggest of a way to group an array of objects by an object key then create a new array of objects based on the grouping in JavaScript?

Question

For example, I have an array like this. Here there are array objects for the same date and different values.

[
    {
        "date": "2020-12-31T18:30:00.000Z",
        "value": 450
    },
    {
        "date": "2020-12-31T18:30:00.000Z",
        "value2": 362
    },
    {
        "date": "2020-12-31T18:30:00.000Z",
        "value3": 699
    },
    {
        "date": "2021-03-01T18:30:00.000Z",
        "value": 269
    },
    {
        "date": "2021-03-01T18:30:00.000Z",
        "value2": 450
    },
    {
        "date": "2021-03-02T18:30:00.000Z",
        "value3": 841
    },
    {
        "date": "2021-04-03T18:30:00.000Z",
        "value": 700
    },
]

I want to make an array grouped and merged for the date as below. The different values with the same "date" are merged into one array object.

[
    {
        "date": "2020-12-31T18:30:00.000Z",
        "value": 450,
        "value2": 362,
        "value3": 699
    },
    {
        "date": "2021-03-01T18:30:00.000Z",
        "value": 269,
        "value2": 450
    },
    {
        "date": "2021-03-02T18:30:00.000Z",
        "value3": 841
    },
    {
        "date": "2021-04-03T18:30:00.000Z",
        "value": 700
    }
]

Answer 1

You can efficiently achieve the result using Map and reduce

const arr = [
  {
    date: "2020-12-31T18:30:00.000Z",
    value: 450,
  },
  {
    date: "2020-12-31T18:30:00.000Z",
    value2: 362,
  },
  {
    date: "2020-12-31T18:30:00.000Z",
    value3: 699,
  },
  {
    date: "2021-03-01T18:30:00.000Z",
    value: 269,
  },
  {
    date: "2021-03-01T18:30:00.000Z",
    value2: 450,
  },
  {
    date: "2021-03-02T18:30:00.000Z",
    value3: 841,
  },
  {
    date: "2021-04-03T18:30:00.000Z",
    value: 700,
  },
];

const dict = arr.reduce((acc, curr) => {
  const { date, ...rest } = curr;
  if (!acc.has(date)) {
    acc.set(date, curr);
  } else {
    const o = acc.get(curr.date);
    Object.entries(curr).forEach(([k, v]) => (o[k] = v));
  }
  return acc;
}, new Map());

const result = [...dict.values()];

console.log(result);

/* This is not a part of answer. It is just to give the output full height. So IGNORE IT */

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