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