How to remove elements from an array by element id that is in another array?

Question

Example

const arr1 = [{id:1,name:'qwerty'},{id:2,name:'qwerty'}]
const arr2 = [{id:1,name:'qwerty'},{id:2,name:'qwerty'},{id:3,name:'qwerty'},{id:4,name:'qwerty'}]

I need to remove all the elements by id from the arr1 that are in the arr2

result

const arr2 = [{id:3,name:'qwerty'},{id:4,name:'qwerty'}]

[Convert array of objects into array of properties](https://stackoverflow.com/q/34309090/4642212) (first Google result for `site:stackoverflow.com js array of objects to array of ids`) and [remove object from js array knowing its Id](https://stackoverflow.com/q/34336633/4642212) (first Google result for `site:stackoverflow.com js remove array elements by id`). Then use [`Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods) methods. — Sebastian Simon, Apr 07 '20 at 18:07
Does this answer your question? [remove object from js array knowing it's Id](https://stackoverflow.com/questions/34336633/remove-object-from-js-array-knowing-its-id) — Sebastian Simon, Apr 07 '20 at 18:07

Nina Scholz · Answer 1 · 2020-04-08T07:56:44.297

3

You could take a Set with all id from arr1 and filter arr2.

This approach

result = arr2.filter(
    (ids => ({ id }) => !ids.has(id))
    (arr1.reduce((s, { id }) => s.add(id), new Set))
);

utilize a closure with an IIFE (immediately-invoked function expression) over an instance of a Set with

arr1.reduce((s, { id }) => s.add(id), new Set)

and this is the value for ids

(ids => callback)(instanceOfSet)

The callback consist only a destructuring for id and a check with Set#has

({ id }) => !ids.has(id)

const
    arr1 = [{ id: 1, name: 'qwerty' }, { id: 2, name: 'qwerty' }],
    arr2 = [{ id: 1, name: 'qwerty' }, { id: 2, name: 'qwerty' }, { id: 3, name: 'qwerty' }, { id: 4, name: 'qwerty' }],
    result = arr2.filter(
        (ids => ({ id }) => !ids.has(id))
        (arr1.reduce((s, { id }) => s.add(id), new Set))
    );

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Apr 08 '20 at 07:56

answered Apr 07 '20 at 18:11

Nina Scholz

376,160
25
347
392

wow! Super answer!:) Nina could you, please, explain how does `ids` work? and why this row works `(arr1.reduce((s, { id }) => s.add(id), new Set)` at first? and only then this row `(ids => ({ id }) => !ids.has(id))` is executed? Thanks in advance!:) – StepUp Apr 08 '20 at 07:44
1

@StepUp, please see edit. – Nina Scholz Apr 08 '20 at 08:01
Thanks! It is really awesome! Great!:) – StepUp Apr 08 '20 at 08:30

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

You can achieve your required result by using filter and findIndex array prototype.

const arr1 = [{id:1,name:'qwerty'},{id:2,name:'qwerty'}];
const arr2 = [{id:1,name:'qwerty'},{id:2,name:'qwerty'},{id:3,name:'qwerty'},{id:4,name:'qwerty'}];

const res = arr2.filter(value => arr1.findIndex(x => x.id === value.id) === -1);
console.log(res);

Update

The same result could be gained by using find instead of findIndex.

const arr1 = [{id:1,name:'qwerty'},{id:2,name:'qwerty'}];
const arr2 = [{id:1,name:'qwerty'},{id:2,name:'qwerty'},{id:3,name:'qwerty'},{id:4,name:'qwerty'}];

const res = arr2.filter(value => !arr1.find(x => x.id === value.id));
console.log(res);

How to remove elements from an array by element id that is in another array?

2 Answers2

Update