Removing duplicates using Set in Javascript

Question

I'm struggling with something that should be very simple. I have an array of objects. I need to remove duplicate from this array based on the id property. So I want to create a Set containing my ids, like this:

let myArray = [{
    id: 10,
    other: "bla"
  },
  {
    id: 15,
    other: "meh"
  },
  {
    id: 10,
    other: "bla"
  }
]

let indexes = new Set();
myArray.forEach(a => indexes.add(a.id));
console.log('indexes list', indexes)

But indexes is always empty. What am I doing wrong? Thanks.

EDIT: I chose @Hyyan Abo Fakher's as correct answer because he was right, but the suggestion in @bambam comment was a great solution to the whole problem. Thanks to everyone.

Which browser and version are you using? Try console.log(Array.from(indexes)) Anyways. Just using reduce will be easier const unique = arr.reduce((a,b) => a.find(({id}) => id === b.id) ? a : a.concat(b) , []); — baao
– baao, Commented Jul 25, 2018 at 11:24
Can't reproduce. Are you sure your this.myArray isn't empty? — Sergio Tulentsev
– Sergio Tulentsev, Commented Jul 25, 2018 at 11:24
duplicate:stackoverflow.com/questions/9229645/… Nice solution: Use the ECMA6 Set — Dennis Guse
– Dennis Guse, Commented Jul 25, 2018 at 11:32
Your code works. why are using this.myArray Share complete snippit — Waqas Noor
– Waqas Noor, Commented Jul 25, 2018 at 11:35

Nenad Vracar · Accepted Answer · 2018-07-25 11:31:33Z

9

You could use filter method with Set to create new array of unique objects by id.

const data = [{id: 10, other: "bla"},{id: 15, other: "meh"},{id: 10, other: "bla"}]

let result = data.filter(function({id}) {
  return !this.has(id) && this.add(id);
}, new Set)

console.log(result)

edited Jul 25, 2018 at 11:31

answered Jul 25, 2018 at 11:26

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

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

3 Comments

Leonid Pyrlia Over a year ago

Really nice approach!

Nenad Vracar Over a year ago

@Leonid Pyrlia Thank you.

esseara Over a year ago

I like this but did not work for me... Trying to understand why.

Hyyan Abo Fakher · Accepted Answer · 2018-07-25 12:03:16Z

But indexes is always empty. What am I doing wrong?

Your code is completely functional, the issue seems to come from the browser console itself, you expect that printing the set to the console will print the items of the set as in arrays but in fact, the browser will print only the object instance

Running your code on StackOverflow will print indexes list {}, but in fact, the browser console printed something else.

To make sure the list is not empty use the size property

let myArray = [{
    id: 10,
    other: "bla"
  },
  {
    id: 15,
    other: "meh"
  },
  {
    id: 10,
    other: "bla"
  }
]

let indexes = new Set();
myArray.forEach(a => indexes.add(a.id));
console.log('indexes list', indexes.size)

To loop over the set you need to use for ... of

let myArray = [{
    id: 10,
    other: "bla"
  },
  {
    id: 15,
    other: "meh"
  },
  {
    id: 10,
    other: "bla"
  }
]

let indexes = new Set();
myArray.forEach(a => indexes.add(a.id));
for (let item of indexes) console.log(item);

31piy · Accepted Answer · 2018-07-25 11:27:57Z

1

You may check if the set has the ID, and if its not, then push the element to a new array. The final array will have the unique elements.

var source = [
  {id: 10, other: "bla"},
  {id: 15, other: "meh"},
  {id: 10, other: "bla"}
];

var set = new Set();
var result = [];

source.forEach(item => {
  if (!set.has(item.id)) {
    set.add(item.id);
    result.push(item);
  }
})

console.log(result);

answered Jul 25, 2018 at 11:27

31piy

23.9k6 gold badges51 silver badges69 bronze badges

2 Comments

Barmar Over a year ago

Why push to a new array when you can just use the set?

31piy Over a year ago

@Barmar -- The set only contains the IDs of the objects.

Reinstate Monica Cellio · Accepted Answer · 2018-07-25 11:53:11Z

1

Simply we can use arrays to resolve this issue with help of loop. like below:

var b = [];
a.forEach(function(index){
   if(b[index.id]==undefined){
       b[index.id] = index.other;
   }
});
console.log(b);

Here a is the original source array.

edited Jul 25, 2018 at 11:53

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

answered Jul 25, 2018 at 11:43

Bannarisamy Shanmugam

1288 bronze badges

5 Comments

Barmar Over a year ago

Why are you assigning to b[index.id] twice?

Bannarisamy Shanmugam Over a year ago

initially b[index.id] will be undefined, so it should be initiated before adding some values into it.

Sergio Tulentsev Over a year ago

@BannarisamyShanmugam: but you're not adding any values to it.

Reinstate Monica Cellio Over a year ago

You don't need to create a property or initialise anything. You can just get rid of b[index.id] = ""; as it is not required at all.

Bannarisamy Shanmugam Over a year ago

@Archer, You are right. I dont need to initiate it. Thanks

Collectives™ on Stack Overflow

Removing duplicates using Set in Javascript

4 Answers 4

3 Comments

Comments

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related