how to reduce to one object by same key value in javascript

Question

I'm looking for reduce elements of array to one object by same key (id).
I try to use Array.reduce, but cannot reduce same id elements.
Actually I don't really full understand Array.reduce's mechanism... :(
Can anybody help me?

const arr = [{id: 1, value: 1, key: 'email'}, {id: 1, value: 1, key: 'status'}, {id: 2, value: 2, key: 'email'}, {id: 2, value: 2, key: 'status'}];

// EXPECTED
const arr = [{id: 1, data: {'email': 1, 'status': 1}}, {id: 2, data: {'email': 2, 'status': 2}}];

// WHAT I DO
const result = arr.reduce((acc, cur)=>{
  const {id, key, value} = cur;
  acc.forEach(el => {
    if (el.id === id) {
      el.data[key] = value;
    }
  })
  acc = [...acc, {'id': id, 'data': { [key]: value }}];
  
  return acc
}, [])

// WHAT I GET
[
  { id: 1, data: { email: 1, status: 1 } },
  { id: 1, data: { status: 1 } },
  { id: 2, data: { email: 2, status: 2 } },
  { id: 2, data: { status: 2 } }
]

Does this answer your question? Most efficient method to groupby on an array of objects — derpirscher
– derpirscher, Commented Apr 8, 2022 at 6:11

zb22 · Accepted Answer · 2022-04-08 06:16:57Z

3

You can use Array.prototype.reduce() this way,
By group them by id as an object and then use Object.values() to get the array that you wanted:

const arr = [
  {id: 1, value: 1, key: 'email'},
  {id: 1, value: 1, key: 'status'},
  {id: 2, value: 2, key: 'email'},
  {id: 2, value: 2, key: 'status'}
];

const arr2 = [
  {id: 1, data: {'email': 1, 'status': 1}},
  {id: 2, data: {'email': 2, 'status': 2}}
];

const res = Object.values(arr.reduce((acc, curr) => {
  if(!acc[curr.id]) {
    acc[curr.id] = {
      id: curr.id,
      data: {
        [curr.key]: curr.value
      }
    }
  } else {
    acc[curr.id].data = {
      ...acc[curr.id].data,
      [curr.key]: curr.value
    }
  }

  return acc;
}, {}));

console.log(res);

edited Apr 8, 2022 at 6:16

answered Apr 8, 2022 at 6:10

zb22

3,2413 gold badges22 silver badges38 bronze badges

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

Comments

ProDec · Accepted Answer · 2022-04-08 06:06:21Z

3

Try this one

const arr = [{id: 1, value: 1, key: 'email'}, {id: 1, value: 1, key: 'status'}, {id: 2, value: 2, key: 'email'}, {id: 2, value: 2, key: 'status'}];

const result = arr.reduce((acc, {id, key, value}) => {
  const entry = acc.find(i => i.id === id);
  if (!entry) {
    acc.push({
      id, data: {
        [key]: value
      }
    });
  } else {
    entry.data[key] = value;
  }
  return acc;
}, []);

console.log(result);

answered Apr 8, 2022 at 6:06

ProDec

5,4001 gold badge6 silver badges12 bronze badges

1 Comment

sleepystar96 Over a year ago

Note: using Array.find() inside Array.reduce() is going to be expensive for larger arrays. I would recommend constructing an object with the ID as the key, and using that to build your "reduced" output. You can later manipulate that object into whatever format you would like, but the end result would be much more performant. This is all theoretical of course.

Collectives™ on Stack Overflow

how to reduce to one object by same key value in javascript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related