Removing Duplicates From 2 Arrays

Question

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?

score 1 · Accepted Answer · answered Aug 23 '22 at 20:14

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

score 1 · Answer 2 · answered Aug 23 '22 at 20:15

You need filter the arr1 and check with some method on each item in the array if there are no equalivient to it exist in the arr2 options.

const arr1 = [
    'Material',
    'Style',
    'Size',
    'add another item',
    'THIS IS A TEST OPTION',
    'Title',
    'Color',
    'dfgdfs',
    'teststststst',
    'THIS IS A NEW OPTION'
 ]
 
 const 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 result =  arr1.filter(i => !arr2.some(o => i === o.option))

console.log(result)

Thanabhas · Answer 3 · 2022-08-23T20:24:27.687

0

To add to the above answers.

Another reason your filters didn't work is because

arr2[index] will go out of range.

arr1 had more indexes than arr2

edited Aug 23 '22 at 20:24

answered Aug 23 '22 at 20:17

Thanabhas

49
6

Removing Duplicates From 2 Arrays

3 Answers3