How to loop and push on the accumulator of a reduce function?

April 21, 2022

I’m trying to reduce an array, and transform it in multiple array.

  const array = [
    { a: 1, b: 6 },
    { a: 1, b: 5 },
    { a: 1, b: 6 },
    { a: 1, b: 4 },
    { a: 1, b: 5 }
  ];

  var newArray = array.reduce(
    (memo, curr) => {
      memo.forEach((item, key) => {
        const found = item.filter((el) => el.a === curr.a && el.b === curr.b);
        if (found.length > 0) return memo[key].push(curr);
        else return memo.push([curr]);
      });

      return memo;
    },
    [[]]
  );

The needed result I try to get is

 [
    [
      { a: 1, b: 5 },
      { a: 1, b: 5 }
    ],
    [
      { a: 1, b: 6 },
      { a: 1, b: 6 },
    ],
    [
      { a: 1, b: 4 },
    ]
 ];

But as you can see if you try, because I push on the memo, the loop continue to fire. And the result contain hundreds arrays.

How I’m supposed to do to limit this loop and get the right result ?

Thanks a lot in advance 🙂

>Solution :

You could use Map to group the element by the key of {a, b}, and then get the values of the group

const array = [
  { a: 1, b: 6 },
  { a: 1, b: 5 },
  { a: 1, b: 6 },
  { a: 1, b: 4 },
  { a: 1, b: 5 },
];

var newArray = Array.from(
  array
    .reduce((map, curr) => {
      const key = JSON.stringify({ a: curr.a, b: curr.b });

      if (!map.has(key)) {
        map.set(key, []);
      }

      map.get(key).push(curr);

      return map;
    }, new Map())
    .values()
);

console.log(newArray);