Remove array item if it has a duplicate id

Question

I have an array with the following values:

expandedComponents: {
  components: [
    {componentName: "hero", componentId: "hero-5856bvC6"},
    {componentName: "features", componentId: "features-iAnIKgJN"},
    {componentName: "features", componentId: "features-ncf3WpTA"},
    {componentName: "features", componentId: "features-iAnIKgJN"},
    {componentName: "features", componentId: "features-ncf3WpTA"},
    {componentName: "footer", componentId: "footer-cUSAiiVd"}
  ]
}

I want to filter out any array items with a duplicate componentId.

this.removeDuplicatesBy(x => x.componentId, this.expandedComponents['components']);

removeDuplicatesBy(keyFn, array) {
  var set = new Set();
  return array.filter(function(x) {
    var key = keyFn(x), isNew = !set.has(key);
    if (isNew) set.add(key);
    return isNew;
  });
 }

However nothing seems to be happening and the duplicate features fields still persists. How do I fix this?

Does this answer your question? [Remove duplicates from an array of objects in JavaScript](https://stackoverflow.com/questions/2218999/remove-duplicates-from-an-array-of-objects-in-javascript) — robinvrd, Feb 18 '20 at 10:41
Your code is working fine in isolation, you just need to assign the return value — Charlie, Feb 18 '20 at 10:48

score 1 · Accepted Answer · answered Feb 18 '20 at 10:59

One liner - Using Set

components = [{componentName:"hero",componentId:"hero-5856bvC6"},{componentName:"features",componentId:"features-iAnIKgJN"},{componentName:"features",componentId:"features-ncf3WpTA"},{componentName:"features",componentId:"features-iAnIKgJN"},{componentName:"features",componentId:"features-ncf3WpTA"},{componentName:"footer",componentId:"footer-cUSAiiVd"}];
console.log(components.filter((set => f => !set.has(f.componentId) && set.add(f.componentId))(new Set)))

Taken From

JavaScript sets's are not supported by old browser Read Here and Here, but you can use polyfill for old browsers support

score 0 · Answer 2 · answered Feb 18 '20 at 10:41

Try using set.

function removeDuplicates() { 
      
            // Create an array of objects 
            books = [ 
                { title: "C++", author: "Bjarne" }, 
                { title: "Java", author: "James" }, 
                { title: "Python", author: "Guido" }, 
                { title: "Java", author: "James" }, 
            ]; 
              
            jsonObject = books.map(JSON.stringify); 
      
            console.log(jsonObject); 
      
            uniqueSet = new Set(jsonObject); 
            uniqueArray = Array.from(uniqueSet).map(JSON.parse); 
      
            console.log(uniqueArray); 
        }

<button onclick="removeDuplicates()"> 
        Click here 
    </button>

Anyways it's working ryt. The things you have mentioned will have the default variable type as var. Try running in your console — Abdul Hameed, Feb 18 '20 at 10:45

score 0 · Answer 3 · answered Feb 18 '20 at 10:47

Try this out :

    let expandedComponents = {
      components: [
        {componentName: "hero", componentId: "hero-5856bvC6"},
        {componentName: "features", componentId: "features-iAnIKgJN"},
        {componentName: "features", componentId: "features-ncf3WpTA"},
        {componentName: "features", componentId: "features-iAnIKgJN"},
        {componentName: "features", componentId: "features-ncf3WpTA"},
        {componentName: "footer", componentId: "footer-cUSAiiVd"}
      ]
    }
    results = expandedComponents['components'].filter(function(a) {
        return !this[a.componentId] && (this[a.componentId] = true);
    }, Object.create(null));
    
    console.log(results);

score 0 · Answer 4 · answered Feb 18 '20 at 10:50

0

The issue is that filter returns a new array and does not modify the incoming array.

You could try something like

this.expandedComponents = this.removeDuplicatesBy(x => x.componentId, this.expandedComponents['components']);

answered Feb 18 '20 at 10:50

Thumbquat

56
3

Remove array item if it has a duplicate id

4 Answers4