Vue Filter one array by an other array

Good morning, I have an array that looks like this:

[
   {
      "firstname": "John"
      "lastname": "Doe",
      "delegatesid":38
   },
   {
      "firstname": "Jane"
      "lastname": "Doe",
      "delegatesid":5
   },
....

Let’s just call it itemsDelegates. And then I have this one:

[
   {
      "id":2,
      "addressesid":209411,
      "delegatesid":38,
      "role":0,
   },
   {
      "id":3,
      "addressesid":209411,
      "delegatesid":45,
      "role":0,
   },
   {
      "id":4,
      "addressesid":209411,
      "delegatesid":50,
      "role":0,
   },
   {
      "id":5,
      "addressesid":209411,
      "delegatesid":5,
      "role":0,
   }
]

Now let’s call this addressvisibility. Now I’m trying to remove from itemsDelegates all entries that are already in addressvisibility. I tried the following approach:

            this.itemsDelegates = response.data
            var deletgates = this.itemsDelegates
            this.items.addressvisibility.forEach(function(element){
              deletgates.filter(element, (obj) => {
                return obj.delegatesid != element.delegatesid
              })
            });

Nevertheless, itemsDelegates still contains all entries. Where is my thinking error here?

Answer

filter returns a new array that only contains items matching the given criteria. It does not filter the array in-place. The simplest answer is to reassign the value of the array such that delegates = delegates.filter(...).

However, you could also combine addressvisibility.some and delegates.filter:

delegates = delegates.filter(delegate =>
    this.items.addressvisibility.some(av => av.delegatesid === delegate.delegatesid) === false
);

That will filter out any items in delegates where there are some (one or more) in addressvisibility where delegatesid matches.