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, Jul 25 '18 at 11:24
Can't reproduce. Are you sure your `this.myArray` isn't empty? — Sergio Tulentsev, Jul 25 '18 at 11:24
duplicate:https://stackoverflow.com/questions/9229645/remove-duplicate-values-from-js-array Nice solution: Use the ECMA6 Set — Dennis Guse, Jul 25 '18 at 11:32
Your code works. why are using this.myArray Share complete snippit — Waqas Noor, Jul 25 '18 at 11:35
I suspect OP has realised their mistake and populated `this.myArray`, then found that the code works. — Reinstate Monica Cellio, Jul 25 '18 at 11:46

Nenad Vracar · Answer 1 · 2018-07-25T11:31:33.547

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 '18 at 11:31

answered Jul 25 '18 at 11:26

Nenad Vracar

118,580
15
151
176

Really nice approach! – Leonid Pyrlia Jul 25 '18 at 11:47
@Leonid Pyrlia Thank you. – Nenad Vracar Jul 25 '18 at 11:48
I like this but did not work for me... Trying to understand why. – esseara Jul 25 '18 at 12:54

Hyyan Abo Fakher · Accepted Answer · 2018-07-25T12:03:16.343

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);

score 1 · Answer 3 · answered Jul 25 '18 at 11:27

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 '18 at 11:27

31piy

23,323
6
47
67

Why push to a new array when you can just use the set? – Barmar Jul 25 '18 at 11:43
@Barmar -- The set only contains the IDs of the objects. – 31piy Jul 25 '18 at 11:43

score 1 · Answer 4 · edited Jul 25 '18 at 11:53

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 '18 at 11:53

Reinstate Monica Cellio

25,975
6
51
67

answered Jul 25 '18 at 11:43

Bannarisamy Shanmugam

112
7

2

Why are you assigning to `b[index.id]` twice? – Barmar Jul 25 '18 at 11:44
initially b[index.id] will be undefined, so it should be initiated before adding some values into it. – Bannarisamy Shanmugam Jul 25 '18 at 11:46
@BannarisamyShanmugam: but you're not adding any values to it. – Sergio Tulentsev Jul 25 '18 at 11:47
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. – Reinstate Monica Cellio Jul 25 '18 at 11:48
1

@Archer, You are right. I dont need to initiate it. Thanks – Bannarisamy Shanmugam Jul 25 '18 at 11:51

Removing duplicates using Set in Javascript

4 Answers4