Split an array of objects into smaller arrays based on the arrays of ids Javascript

I have an initial array of objects and 2 arrays of ids as following:

const arr = [
  { id: 1, name: "John" },
  { id: 7, name: "Alice" },
  { id: 10, name: "Ken" },
  { id: 5, name: "Bob" },
  { id: 2, name: "Kevin" },
  { id: 6, name: "Tony" },
  { id: 3, name: "Harry" },
  { id: 4, name: "Kyle" },
  { id: 8, name: "Jane" },
  { id: 9, name: "Sam" },
];
const list1 = [1, 4, 2];
const list2 = [3, 8, 9, 10];

What I want is 2 new sub arrays of arr which include the objects having the respective id in list1 and list2. Notice that the order of objects of two new sub arrays must be as the same order of ids in list1 and list2.

I have tried the below way, it works but may not be effective with a large number of items in arr:

const subArr1 = [];
const subArr2 = [];

list1.forEach((id) => {
  const idx = arr.findIndex((item) => item.id === id);
  if (idx !== -1 && subArr1.findIndex((item) => item.id === id) === -1) {
    subArr1.push(arr[idx]);
  }
});
list2.forEach((id) => {
  const idx = arr.findIndex((item) => item.id === id);
  if (idx !== -1 && subArr2.findIndex((item) => item.id === id) === -1) {
    subArr2.push(arr[idx]);
  }
});


/* Result:
subArr1 = [
  { id: 1, name: "John" },
  { id: 4, name: "Kyle" },
  { id: 2, name: "Kevin" },
];
subArr2 = [
  { id: 3, name: "Harry" },
  { id: 8, name: "Jane" },
  { id: 9, name: "Sam" },
  { id: 10, name: "Ken" },
];
*/

Beside my idea, is there any better solution?

Updated:

The Array.prototype.filter() and Array.prototype.includes() works to create 2 new sub arrays but the order also should be the same as order of ids in list1 and list2

const subArr1 = list1.map((id) => arr.find((item) => item.id === id));
const subArr2 = list2.map((id) => arr.find((item) => item.id === id));

const arr = [
  { id: 1, name: 'John' },
  { id: 7, name: 'Alice' },
  { id: 10, name: 'Ken' },
  { id: 5, name: 'Bob' },
  { id: 2, name: 'Kevin' },
  { id: 6, name: 'Tony' },
  { id: 3, name: 'Harry' },
  { id: 4, name: 'Kyle' },
  { id: 8, name: 'Jane' },
  { id: 9, name: 'Sam' },
];

const list1 = [1, 4, 2];
const list2 = [3, 8, 9, 10];

const subArr1 = arr.filter((item) => list1.includes(item.id));
const subArr2 = arr.filter((item) => list2.includes(item.id));

console.log({
  subArr1,
  subArr2,
});

/**
 * Output:
 * {
  subArr1: [
    { id: 1, name: 'John' },
    { id: 2, name: 'Kevin' },
    { id: 4, name: 'Kyle' }
  ],
  subArr2: [
    { id: 10, name: 'Ken' },
    { id: 3, name: 'Harry' },
    { id: 8, name: 'Jane' },
    { id: 9, name: 'Sam' }
  ]
}
 */

in above code consists of an array arr containing objects with id and name properties. There are also two additional arrays, list1 and list2, which contain some IDs.

The goal of the code is to filter the arr array based on the IDs present in list1 and list2, resulting in two sub-arrays: subArr1 and subArr2.

Here's a step-by-step breakdown of the solution:

• Initialize an empty array subArr1 to store the filtered objects from arr based on the IDs in list1.
• Use the filter method on the arr array to iterate over each object.
• For each object, use the includes method on list1 to check if the id - of the object exists in list1.
• If the object's id is present in list1, it will return true and be included in the subArr1 array.
• Repeat the same steps to create subArr2 by filtering arr based on the IDs in list2.

After executing the code, subArr1 will contain the objects from arr with IDs 1, 4, and 2, while subArr2 will contain the objects with IDs 3, 8, 9, and 10.

By using the filter method and the includes method, we can easily filter the array of objects based on specific IDs and store the filtered objects in separate sub-arrays.

Here's a solution:

const filterByIds = (arr, ids) => ids.map(id => arr.find(e => e.id === id)).filter(e => e);

The .filter(e => e) is optional if you don't want undefined in your list when the id is not found.

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

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

const arr = [
  { id: 1, name: "John" },
  { id: 7, name: "Alice" },
  { id: 10, name: "Ken" },
  { id: 5, name: "Bob" },
  { id: 2, name: "Kevin" },
  { id: 6, name: "Tony" },
  { id: 3, name: "Harry" },
  { id: 4, name: "Kyle" },
  { id: 8, name: "Jane" },
  { id: 9, name: "Sam" },
];
const list1 = [1, 4, 2];
const list2 = [3, 8, 9, 10];

const filterByIds = (arr, ids) => ids.map(id => arr.find(e => e.id === id)).filter(e => e);

const arr1 = filterByIds(arr, list1);
console.log(arr1);

const arr2 = filterByIds(arr, list2);
console.log(arr2);

<!-- end snippet -->