Compare two array of objects and remove objects from first array if a property value is matched

Question

I have 2 array of objects like

 const arrayOne = [{id: 1, name: 'one'}, {id: 2, name: 'two'}, {id: 3, name: 'three'}];
 const arrayTwo = [{id: 2, name: 'two'}, {id: 3, name: 'three'}];

Here, I need to compare both these arrays and remove matching objects from arrayOne, which should finally give

 this.arrayOne = [{id: 1, name: 'one'}];

I tried like below but it is removing all objects from the array

this.arrayOne = this.arrayOne.filter(o1 => this.arrayTwo.some(o2 => o1.id === o2.id));

What I am doing wrong here? Please suggest. Thanks

• deekeh: So you just want to see if the ids match? And if they match, remove it from array 1?
• vamsi: correct. if ids match i need to remove the object from array 1
• deekeh: OK. I have posted an answer. Please tell if it helps. I am sure there will be a better/smaller way to do it, but that's pretty much the gist of it.
• Yenmangu: Sorry Im late, but what if they keys are not the same for the object? for example, but I want to compare values? ie, key value pairs in two objects, and remove the proeprties whose values match certain conditions? could I use el.key instead of el.id

Answer 1

const arrayOne = [
 { id: 1, name: "one" },
 { id: 2, name: "two" },
 { id: 3, name: "three" },
];
const arrayTwo = [
 { id: 2, name: "two" },
 { id: 3, name: "three" },
];
const arrayTwoIds = new Set(arrayTwo.map((el) => el.id));
const arrayOneFiltered = arrayOne.filter((el) => !arrayTwoIds.has(el.id));
console.log(arrayOneFiltered);
// [ { id: 1, name: 'one' } ]

Depending on the size of the array, creating a set can improve performance, as you do not need to loop over arrayTwo arrayOne.length times but only once. After that, you can look up the existence of an id in arrayTwo in constant time.

Yet, as pointed out in another answer, this is not necessary if the arrays are small (like in your example). In this case, you could also use this one-liner:

arrayOne = arrayOne.filter((elOne) => !arrayTwo.some((elTwo) => elOne.id === elTwo.id));

Here, arrayOne would need to be mutable, i.e. defined with let.

Answer 2

You can find it by comparing it with id.

And arrayOne must be a let.

 let arrayOne = [{id: 1, name: 'one'}, {id: 2, name: 'two'}, {id: 3, name: 'three'}];
 const arrayTwo = [{id: 2, name: 'two'}, {id: 3, name: 'three'}];
 
 arrayOne = arrayOne.filter(one => !arrayTwo.find(two => one.id == two.id));
 
 console.log(arrayOne);

Answer 3

const arrayOne = [{
 id: 1,
 name: 'one'
}, {
 id: 2,
 name: 'two'
}, {
 id: 3,
 name: 'three'
}];
const arrayTwo = [{
 id: 2,
 name: 'two'
}, {
 id: 3,
 name: 'three'
}];
const arrayTwoId = arrayTwo.map(el => (el.id)); // extract id from arrayTwo
const result = arrayOne.filter(el => !arrayTwoId.includes(el.id));
console.log(result);

---

1. Extract all the ids from the arrayTwo.
2. filter those objects who do not match the array of ids of arrayTwo.

• Amadan: Depending on the size of the array, using new Set(arrayTwoId) and .has(el.id) is faster.
• deekeh: fixed with negation.
• deekeh: Looks like someone already posted the one with Set. Just leaving this as is.
• Amadan: Yeah, wasn't a complaint, this is perfectly good enough for short arrays.

Answer 4

Your way is correct. but you miss the not operation (!) before arrayTwo.some. So the correct way is this:

const arrayOne = [
 {id: 1, name: 'one'},
 {id: 2, name: 'two'},
 {id: 3, name: 'three'}
];
const arrayTwo = [
 {id: 2, name: 'two'},
 {id: 3, name: 'three'}
];
// Shared Items between arrayOne and arrayTwo (this what you done)
const sharedObjects = arrayOne.filter(o1 => arrayTwo.some(o2 => o1.id === o2.id));
console.log(sharedObjects);
// arrayOne - arrayTwo (this is what you want)
const arrayOneUniqueObjects = arrayOne.filter(o1 => !arrayTwo.some(o2 => o1.id === o2.id));
console.log(arrayOneUniqueObjects);

Also, You can find more details here:

bobbyhadz.com/blog/javascript-get-difference-between-two-arrays-of-objects