Question 186742 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

Tags:

4

Answers


  1. 0

    You can try using Array.prototype.map()

    The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

    and Array.prototype.find()

    The find() method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

    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 = list1.map((id) => arr.find((item) => item.id === id));
const subArr2 = list2.map((id) => arr.find((item) => item.id === id));

console.log(subArr1);
console.log(subArr2);

    In the above solution, the map() is used on list1 and list2 to iterate over each ID. Then, the find() is used to find the corresponding item in arr based on the current ID. This maintains the order of the IDs in the resulting subArr1 and subArr2.

    Login or Signup to reply.
  2. 0 
    const subArr1 = list1.map((id) => arr.find((item) => item.id === id));
const subArr2 = list2.map((id) => arr.find((item) => item.id === id));
    Login or Signup to reply.
  3. 0 
    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' }
  ]
}
 */
    Login or Signup to reply.
  4. 0

    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.

    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);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search