Javascript: how to compare two arrays of objects and remove equal values?

May 17, 2022

I have two arrays:
This is the main array(im printing it in html but the user can remove objects):

checkboxes = [
{name: "boxes", color: "red"},
{name: "boxes", color: "orange"},
{name: "tree", color: "green"}
{name: "tree", color: "red"}
{name: "tree", color: "yellow"}
]

And this is the array with the items to remove in checkboxes[]:

finalArray = [
{name: "tree", color: "green"}
{name: "tree", color: "red"}
{name: "tree", color: "yellow"}
]

The result after removing equal objects from those array must be:

checkboxes = [
{name: "boxes", color: "red"},
{name: "boxes", color: "orange"}
]

So im receiving an array (finalArray[]) with the objects to remove in the checkboxes[].
All equal objects must be removed.
I tried:
.filter and the .map but i didnt get a progress.

Thanks.

>Solution :

let checkboxes = [
  {name: "boxes", color: "red"},
  {name: "boxes", color: "orange"},
  {name: "tree", color: "green"},
  {name: "tree", color: "red"},
  {name: "tree", color: "yellow"}
]
let finalArray = [
  {name: "tree", color: "green"},
  {name: "tree", color: "red"},
  {name: "tree", color: "yellow"}
]
checkboxes = checkboxes.filter(ele => !finalArray.some(finalEle => JSON.stringify(finalEle) === JSON.stringify(ele)))
console.log(checkboxes)