Filtering out users that appear in an array of strings

I am trying to filter out any user whose id appears in an array of strings. I am trying to use a filter() method to do this but strugglign with implementing the logic.

    const x = [
      {
        notebookId: "abc",
        notebookUsers: [1, 2, 3, 4],
      },
      {
        notebookId: "cde",
        notebookUsers: [2, "foo", 4, 3],
      },
      {
        notebookId: "fgh",
        notebookUsers: ["bla", 4, 5, "123"],
      },
      {
        notebookId: "qqq",
        notebookUsers: [33, 16, 12],
      },
      {
        notebookId: "ab",
        notebookUsers: ["abc", 23213, 2131, 33],
      },
    ];

    const y = ["abc", "123", "bla", "foo"];

    const filteredUsersArray = x.filter((nb) => {
      const filteredUsers = nb.notebookUsers.filter(
        (user) => !y.includes(user)
      );
      return (
        nb.notebookId !== "welcome" &&
        nb.notebookId !== "null" &&
        nb.notebookId !== "1234" &&
        filteredNotebookUsers.length > 0
      );
    });

    console.log(filteredUsersByNotebookArray);

Result:

[  
  {    
    notebookId: "abc",    
    notebookUsers: [1, 2, 3, 4, 2, "foo", 4, 3]
  },
  {
    notebookId: "cde",
    notebookUsers: [2, "foo", 4, 3]
  },
  {
    notebookId: "fgh",
    notebookUsers: ["bla", 4, 5, "123"]
  },
  {
    notebookId: "qqq",
    notebookUsers: [33, 16, 12, "abc", 23213, 2131, 33]
  },
  {
    notebookId: "ab",
    notebookUsers: ["abc", 23213, 2131, 33]
  }
]

This doesn't appear to remove the forbidden ids. Not sure where i am wrong.

you are returning a check on a variable called filteredNotebookUsers which does not exist, update the return statement to check the length of the filteredUsers array

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const x = [
  {
    notebookId: "abc",
    notebookUsers: [1, 2, 3, 4],
  },
  {
    notebookId: "cde",
    notebookUsers: [2, "foo", 4, 3],
  },
  {
    notebookId: "fgh",
    notebookUsers: ["bla", 4, 5, "123"],
  },
  {
    notebookId: "qqq",
    notebookUsers: [33, 16, 12],
  },
  {
    notebookId: "ab",
    notebookUsers: ["abc", 23213, 2131, 33],
  },
];

const y = ["abc", "123", "bla", "foo"];

const filteredUsersArray = x.filter((nb) => {
  const filteredUsers = nb.notebookUsers.filter(
    (user) => !y.includes(user)
  );
  return (
    nb.notebookId !== "welcome" &&
    nb.notebookId !== "null" &&
    nb.notebookId !== "1234" &&
    filteredUsers.length > 0
  );
});

console.log(filteredUsersArray);

<!-- end snippet -->

I'm not sure if i understood what you are trying to achieve.
Maybe it is the following:

'Before' [
  {
    notebookId: 'abc',
    notebookUsers: [ 1, 2, 3, 4 ]
  },
  {
    notebookId: 'cde',
    notebookUsers: [ 2, 'foo', 4, 3 ]
  },
  {
    notebookId: 'fgh',
    notebookUsers: [ 'bla', 4, 5, '123' ]
  },
  {
    notebookId: 'qqq',
    notebookUsers: [ 33, 16, 12 ]
  },
  {
    notebookId: 'ab',
    notebookUsers: [ 'abc', 23213, 2131, 33 ]
  }
]
'After' [
  {
    notebookId: 'abc',
    notebookUsers: [ 1, 2, 3, 4 ]
  },
  { notebookId: 'cde', notebookUsers: [ 2, 4, 3 ] },
  { notebookId: 'fgh', notebookUsers: [ 4, 5 ] },
  {
    notebookId: 'qqq',
    notebookUsers: [ 33, 16, 12 ]
  },
  {
    notebookId: 'ab',
    notebookUsers: [ 23213, 2131, 33 ]
  }
]

Here is the code to return the same Array but without the forbiddenIDs

const forbiddenIDs = ["abc", "123", "bla", "foo"];
const filteredUsersArray = notebooksArray.map((nb) => {
const filteredUsers = nb.notebookUsers.filter(
    (user) => !forbiddenIDs.includes(user)
  );
  return (
    nb.notebookId !== "welcome" &&
    nb.notebookId !== "null" &&
    nb.notebookId !== "1234" &&
    filteredUsers.length > 0
  ) && { notebookId: nb.notebookId, notebookUsers: filteredUsers};
});
console.log(filteredUsersArray);

.map returns a new Array that will be stored in filteredUsersArray.
With && { notebookId: nb.notebookId, notebookUsers: filteredUsers}; we mean that if the previous condition is true we return an object like we had before but with the filtered users. So we add the same notebookId that we had before, and the notebookUsers array will now contain the filtered users.

It seems that filter doesn't do quite what you expect.
Consider this small example:

const userIds = [1,2,3,4];
const filteredUserIds = userIds.filter(id => id >= 3);
console.log(userIds);         // [1,2,3,4]
console.log(filteredUserIds); // [3,4]

filter does not change the array that it is filtering

It looks like what you want to do is to map the notebooks so that the users are filtered, and then filter the mapped notebooks:

    const filteredNotebooks =
      x.map((nb) => {
        const filteredUsers = nb.notebookUsers.filter(
          (user) => !y.includes(user)
        );
        return { ...nb, notebookUsers: filteredUsers };
      }).filter((nb) => {
        return (
          nb.notebookId !== "welcome" &&
          nb.notebookId !== "null" &&
          nb.notebookId !== "1234" &&
          nb.notebookUsers.length > 0
        );
      });

I don't know exactly what you are wanting. But you can try in this way -

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const x = [
{
notebookId: "abc",
notebookUsers: [1, 2, 3, 4],
},
{
notebookId: "cde",
notebookUsers: [2, "foo", 4, 3],
},
{
notebookId: "fgh",
notebookUsers: ["bla", 4, 5, "123"],
},
{
notebookId: "qqq",
notebookUsers: [33, 16, 12],
},
{
notebookId: "ab",
notebookUsers: ["abc", 23213, 2131, 33],
},
];
const y = ["abc", "123", "bla", "foo"];
const filteredUsersArray = x.filter((nb) => {
return nb.notebookUsers.filter(
(user) => !y.includes(user)
)
});
console.log(filteredUsersArray);

<!-- end snippet -->