Merge objects in array of object removing duplicates

Question

I have this array of objects:

const a = [
   {
      id: 1,
      name: 'John',
      role: 'admin'
   },
   {
      id: 1,
      name: 'John',
      role: 'user'
   },
   {
      id: 2,
      name: 'Max',
      role: 'user'
   }  
]

I would like to have a result like this, so having one object for id:1 and a merged array in role property:

const a = [
   {
      id: 1,
      name: 'John',
      role: ['admin', 'user']
   },
   {
      id: 2,
      name: 'Max',
      role: 'user'
   }  
]

EDIT: I am able to remove duplicates when I have just to properties in the object. In my case I don't know how to retrieve the name property using the following snippet:

const b = [...new Set(a.map(d => d.id))].map(obj => {
  return {
    id: obj,
    data: a.filter(d => d.id === obj).map(d => d.role)
  }
})

I suggest looing at Array.reduce() method and letting the community know what you tried. re: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — joshvito
– joshvito, Commented Jun 22, 2022 at 13:31
You also probably want an array for role no matter how many elements are in it. — jsejcksn
– jsejcksn, Commented Jun 22, 2022 at 13:33

Nina Scholz · Accepted Answer · 2022-06-22 13:56:19Z

3

You could take an object for grouping and use an array for additional roles.

const
    data = [{ id: 1, name: 'John', role: 'admin' }, { id: 1, name: 'John', role: 'user' }, { id: 2, name: 'Max', role: 'user' }],
    result = Object.values(data.reduce((r, o) => {
        if (!r[o.id]) r[o.id] = { ...o };
        else r[o.id].role = [].concat(r[o.id].role, o.role);
        return r;
    }, {}));
    
console.log(result);

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

answered Jun 22, 2022 at 13:56

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Comments

Michał Sadowski · Accepted Answer · 2022-06-22 13:45:56Z

2

It can be done very simply with a reducer:

const a = [
   {
      id: 1,
      name: 'John',
      role: 'admin'
   },
   {
      id: 1,
      name: 'John',
      role: 'user'
   },
   {
      id: 2,
      name: 'Max',
      role: 'user'
   }  
]

const b = a.reduce((acc, el)=>{
  const existingEl = acc.find(accEl=>accEl.id === el.id)
  if(existingEl) existingEl.role.push(el.role)
  // a very inelegant way of building a shallow copy with
  // a bit of a data structure change
  else acc.push({id: el.id, name: el.name, role:[el.role]})
  return acc
}, [])

console.log(b)

answered Jun 22, 2022 at 13:45

Michał Sadowski

2,1991 gold badge13 silver badges27 bronze badges

1 Comment

Anders Ekman Over a year ago

I like this approach because it can be chained on my precious fetched and mapped array.

Mohit Sharma · Accepted Answer · 2022-06-22 13:40:52Z

1

give this a try

const a = [
   {
      id: 1,
      name: 'John',
      role: 'admin'
   },
   {
      id: 1,
      name: 'John',
      role: 'user'
   },
   {
      id: 2,
      name: 'Max',
      role: 'user'
   }
]

const newArr = a.reduce((acc, val) => {
    const findIndex = acc.findIndex(f => f.id === val.id);
    if (findIndex > -1) {
        if ((typeof acc[findIndex].role === 'string')) {
            acc[findIndex].role =  [acc[findIndex].role, val.role]
        } else {
            acc[findIndex].role.push(val.role)
        }
        
    } else {
        acc.push(val)
    }
    return acc
}, []);

console.log(newArr)

answered Jun 22, 2022 at 13:40

Mohit Sharma

6587 silver badges14 bronze badges

Comments

jsejcksn · Accepted Answer · 2022-06-22 14:04:14Z

1

You can iterate over each item in your input, storing its data on an object keyed by the item's id property. Using a Set to collect the roles during iteration ensures that no duplicates will exist in the end result:

function mergeRoles (users) {
  const merged = {};

  for (const {id, name, role} of users) {
    (merged[id] ??= {id, name, role: new Set([role])}).role.add(role);
  }

  return Object.values(merged).map(user => ({...user, role: [...user.role]}));
}

const input = [
  { id: 1, name: 'John', role: 'admin' },
  { id: 1, name: 'John', role: 'user'  },
  { id: 2, name: 'Max',  role: 'user'  },
];

const result = mergeRoles(input);
console.log(result);

edited Jun 22, 2022 at 14:04

answered Jun 22, 2022 at 13:46

jsejcksn

34.6k5 gold badges55 silver badges79 bronze badges

2 Comments

palnic Over a year ago

What does "??=" means?

jsejcksn Over a year ago

@palnic It is the logical nullish assignment operator

Leftium · Accepted Answer · 2022-06-22 14:01:52Z

For problems like this I usually turn the array into an object dictionary to merge all the duplicates, then convert the dictionary back to an array:

const a = [{
    id: 1,
    name: 'John',
    role: 'admin'
  },
  {
    id: 1,
    name: 'John',
    role: 'user'
  },
  {
    id: 2,
    name: 'Max',
    role: 'user'
  }
];

// Merge duplicates using object dictionary.
let itemsById = {};
for (let item of a) {
  if (!itemsById[item.id]) {
    // Id not seen yet.
    item.role = [item.role];
    itemsById[item.id] = item;
  } else {
    // Duplicate Id.
    itemsById[item.id].role.push(item.role);
  }
}

// Convert object dictionary back to array.
let newArray = [];
for (const id in itemsById) {
  let item = itemsById[id];
  if (item.role.length == 1) {
    item.role = item.role[0];
  }
  newArray.push(item);
}

console.log(newArray);

Collectives™ on Stack Overflow

Merge objects in array of object removing duplicates

5 Answers 5

Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related