Remove duplicated objects in JavaScript Array not working

Question

First of, I am aware that there are LOTS of answers on SO on this, but I am having some issues with them, that is why I post another question on this topic.

So here is my Array of Objects:

0: {id: 'lAYOUT', label: 'lAYOUT', items: 'val1'}
1: {id: 'tecst', label: 'tecst', items: 'val1'}
2: {id: 'tecst', label: 'tecst', items: 'val1'}

I am trying to filter out that there would be only 2 values, since there are 2 objects in array that are the same. I would like to make unique objects by items and label.

This is how I am trying to do it with lodash:

const filteredArray = uniq(nestedItems, (item, key, a) => item.items && item.label)

But it keeps returning me all 3 elements still.

I also tried it like this:

const filteredArray = [...new Set(nestedItems)]

Does this answer your question? How to determine equality for two JavaScript objects? — Nitheesh
– Nitheesh, Commented Jan 11, 2022 at 9:58
Does this answer your question? How to remove all duplicates from an array of objects? — Mayur Vaghasiya
– Mayur Vaghasiya, Commented Jan 11, 2022 at 10:00
@MayurVaghasiya My bad, I copied/paste wrong. Instead of key it should be label, but issue exist, I just copied it on SO wrongly. — Nightcorey
– Nightcorey, Commented Jan 11, 2022 at 10:04

Mayur Vaghasiya · Accepted Answer · 2022-01-11 11:00:48Z

1

Using Filter get the particular object value, index and array. Using FindIndex get the particular array object. and compare filter object and findindex object, if it return false then push in new array! and make new unique array !

Try this code !

 let arr = [{ id: 'lAYOUT', label: 'lAYOUT', items: 'val1' },
    { id: 'tecst', label: 'tecst', items: 'val1' },
    { id: 'tecst', label: 'tecst', items: 'val1' }];

    let newArr = arr.filter((value, index, self) =>
      index === self.findIndex((t) => (
        t.label === value.label && t.items === value.items
      ))
    );
    console.log(newArr, 'newArr');

edited Jan 11, 2022 at 11:00

answered Jan 11, 2022 at 10:07

Mayur Vaghasiya

1,4812 gold badges18 silver badges27 bronze badges

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

2 Comments

Nightcorey Over a year ago

Looks good now! I coudnt manage to get it to work with both label and items, but your solutions seems to do it! :)

Parzh Over a year ago

This has very low performance

A1exandr Belan · Accepted Answer · 2022-01-11 10:39:05Z

You can use hash grouping to filter by several keys:

const data = [{ id: 'lAYOUT', label: 'lAYOUT', items: 'val1' }, { id: 'tecst', label: 'tecst', items: 'val1' }, { id: 'tecst', label: 'tecst', items: 'val1' }];

const unique = Object.values(data.reduce((acc, obj) => {
  const hash = `${obj.id}-${obj.label}`;
  acc[hash] = obj;
  return acc;
}, {}));

console.log(unique);

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

Same result with lodash

const data = [{ id: 'lAYOUT', label: 'lAYOUT', items: 'val1' }, { id: 'tecst', label: 'tecst', items: 'val1' }, { id: 'tecst', label: 'tecst', items: 'val1' }];

const result = _.uniqWith(data, (o1, o2) => `${o1.id}-${o1.label}` === `${o2.id}-${o2.label}`);

console.log(result);

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.js" integrity="sha512-2iwCHjuj+PmdCyvb88rMOch0UcKQxVHi/gsAml1fN3eg82IDaO/cdzzeXX4iF2VzIIes7pODE1/G0ts3QBwslA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Ian · Accepted Answer · 2022-01-12 08:12:57Z

0

const data = [
  { id: 'id1', label: 'label1', items: 'items1' }, 
  { id: 'id2', label: 'label2', items: 'items2' },
  { id: 'id1', label: 'label1', items: 'items2' }
];

const unique = (...keys) => [
    ...new Map(data.map(item => [keys.map(key => item[key]).join(), item])).values()
];

console.log(1, unique('label'));
console.log(2, unique('label','items'));

edited Jan 12, 2022 at 8:12

answered Jan 11, 2022 at 10:04

Ian

1,1921 gold badge7 silver badges16 bronze badges

2 Comments

Nightcorey Over a year ago

Hey @Ian the problem with this solution in my case is that I need to make it unique by 2 keys: items AND label. WIth this unique function I can only make it unique only by 1 property.

Ian Over a year ago

Hi @Nightcorey I misunderstood the meaning of your question, thinking that only one key is needed to distinguish, I modified my answer, now you can use multiple keys

Collectives™ on Stack Overflow

Remove duplicated objects in JavaScript Array not working

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related