how to get the children of a deeply nested array in js

I have this data

  const data = [
{
name: "Car",
id: "19",
count: "20",
depth: "1",
children: [
{
name: "Wheel",
id: "22",
count: "3",
depth: "2",
children: [
{
name: "Engine",
id: "101",
count: "1",
depth: "3",
children: [
{
name: "Engine and Brakes",
id: "344",
count: "1",
depth: "4",
children: []
}
]
}
]
}
]
},
{
name: "Bike",
id: "3",
count: "12",
depth: "1",
children: [
{
name: "SpeedBike",
id: "4",
count: "12",
depth: "2",
children: []
}
]
}
];

I want to pass in multiple category ids as follows ['101', '3'] and be able to only get the direct children of the passed category ids which should look like this:

[
{
name: "Engine and Brakes",
id: "344",
count: "1",
},
{
name: "SpeedBike",
id: "4",
count: "12",
}
]

If no category id is passed I want to be able to see the parent and the direct children as default. like below:

[
{  
name: "Car",
id: "19",
count: "20"
},
{
name: "Wheel",
id: "22",
count: "3"
},
{
name: "Bike",
id: "3",
count: "12",
},
{
name: "SpeedBike",
id: "4",
count: "12"
}
]

If the category id passed does not have children I want to return an empty array.:

[]

I want to avoid using for foreach and while. How can I achieve this? I have tried using map and filter but no luck. Can someone please help? What is the best approach to this?

I am using js and ts.

The nested array can be deep with multiple deep levels.

There is no built-in functions to do that. Instead, there are two approaches that we can take: iterative and recursive.

The recursive approach requires O(logN) extra space for call stack size; thus, we will use the iterative approach.

Algorithm:

• If category ids are provided:
  • Populate stack with categories of the first level
  • While the stack is not empty:
    • Pop category from the stack
    • If category id is in the desired ids array:
      • Map through the category's children and retrieve the desired properties
    • Push children of the category to stack
• else:
  • Loop through the first level.
  • Push the parent and children of the parent.

Type for category:

type Category = {
name: string;
id: string;
count: string;
depth: string;
children: Category[];
};

Implementation:

const getCategoriesChildren = (
categoryIds: Category['id'][],
categories: Category[],
) => {
const foundChildren: Pick<Category, 'id' | 'count' | 'name'>[] = [];
if (categoryIds.length === 0) {
return categories.reduce<Pick<Category, 'id' | 'count' | 'name'>[]>(
(acc, category) => {
acc.push(mapCategory(category), ...category.children.map(mapCategory));
return acc;
},
[],
);
}
const stack = [...categories];
while (stack.length) {
const category = stack.pop();
if (!category) continue;
if (categoryIds.includes(category.id)) {
foundChildren.push(
...category.children.map((childCategory) => ({
name: childCategory.name,
id: childCategory.id,
count: childCategory.count,
})),
);
}
stack.push(...category.children);
}
return foundChildren;
};

Usage:

// [{
//   "name": "SpeedBike",
//   "id": "4",
//   "count": "12"
// }, {
//   "name": "Engine and Brakes",
//   "id": "344",
//   "count": "1"
// }] 
console.log(getCategoriesChildren(['101', '3'], data));
// [{
//   "name": "Car",
//   "id": "19",
//   "count": "20"
// }, {
//   "name": "Wheel",
//   "id": "22",
//   "count": "3"
// }, {
//   "name": "Bike",
//   "id": "3",
//   "count": "12"
// }, {
//   "name": "SpeedBike",
//   "id": "4",
//   "count": "12"
// }]
console.log(getCategoriesChildren([], data));

playground