Removing Duplicates From 2 Arrays

August 23, 2022

I have 2 arrays that I’m trying to compare and get the unique values from:

arr1 = [
   'Material',
   'Style',
   'Size',
   'add another item',
   'THIS IS A TEST OPTION',
   'Title',
   'Color',
   'dfgdfs',
   'teststststst',
   'THIS IS A NEW OPTION'
]

arr2 = [
   { option: 'Title', product: [ [Object] ] },
   { option: 'Style', product: [ [Object] ] },
   { option: 'Material', product: [ [Object] ] },
   { option: 'Size', product: [ [Object], [Object] ] },
   { option: 'Color', product: [ [Object], [Object] ] },
   { option: 'THIS IS A NEW OPTION', product: [ [Object] ] },
   { option: 'THIS IS A TEST OPTION', product: [ [Object] ] },
   { option: 'add another item', product: [ [Object] ] }
]

Expected output:

['dfgdfs','teststststst']

I have no issue pulling out unique values when the arrays are 1 level deep. However, I’m having issues with arr2 being an array of objects.

I’ve tried:

arr1 = arr1.filter(val => !arr2.includes(val));

Which obviously doesn’t work because arr2 is an array of objects.

I’ve also tried:

 arr1.filter((val, index) => {
      if (arr2[index]) {
        !arr2[index].option.includes(val);
      }
    });

As well as:

arr1.filter((val, index) => {
      allUniqueOptions.forEach((option) => {
        !option.option.includes(val);
      });
    });

This seems like it should be so simple but I’ve been racking my head for hours. Any idea what I’m doing wrong?

>Solution :

Your filter functions need to return true if the item is to be included, and false if not. Note that your last two examples don’t return anything.

The logic that I used in the filter function is — Does the current element appear as a "option" property in arr2? if yes return false, if no return true.

arr1 = [
   'Material',
   'Style',
   'Size',
   'add another item',
   'THIS IS A TEST OPTION',
   'Title',
   'Color',
   'dfgdfs',
   'teststststst',
   'THIS IS A NEW OPTION'
]

arr2 = [
   { option: 'Title', product: {}},
   { option: 'Style', product: {} },
   { option: 'Material', product: {} },
   { option: 'Size', product: {} },
   { option: 'Color', product: {} },
   { option: 'THIS IS A NEW OPTION', product: {} },
   { option: 'THIS IS A TEST OPTION', product: {} },
   { option: 'add another item', product: {} }
]

const uniques = arr1.filter(item => !arr2.find(el => el.option === item));
console.log(uniques);