How to generate child keys by parent keys in array JavaScript?

Let's say, we have an array of objects representing a hierarchical structure where each object has an id, parent_id, and title:

const arr = [
    { id: 1, parent_id: 0, title: 'Movies' },
    { id: 2, parent_id: 0, title: 'Music' },
    { id: 3, parent_id: 1, title: 'Russian movies' },
    { id: 4, parent_id: 2, title: 'Russian music' },
    { id: 5, parent_id: 3, title: 'New' },
    { id: 6, parent_id: 3, title: 'Top10' },
    { id: 7, parent_id: 4, title: 'New' },
    { id: 8, parent_id: 4, title: 'Top10' },
    { id: 9, parent_id: 0, title: 'Soft' }
];

We are required to write a function that takes this array and returns a new array of objects with each object having an extra property "childs" which contains an array of all the IDs of objects that are direct or indirect children of a particular object.

Expected Output

The output should look like this:

[
    { id: 1, parent_id: 0, title: 'Movies', childs: [ 3, 5, 6 ] },
    { id: 2, parent_id: 0, title: 'Music', childs: [ 4, 7, 8 ] },
    { id: 3, parent_id: 1, title: 'Russian movies', childs: [ 5, 6 ] },
    { id: 4, parent_id: 2, title: 'Russian music', childs: [ 7, 8 ] },
    { id: 5, parent_id: 3, title: 'New', childs: [] },
    { id: 6, parent_id: 3, title: 'Top10', childs: [] },
    { id: 7, parent_id: 4, title: 'New', childs: [] },
    { id: 8, parent_id: 4, title: 'Top10', childs: [] },
    { id: 9, parent_id: 0, title: 'Soft', childs: [] }
]

Using Recursive Approach

Here's the implementation using a recursive approach to find all direct and indirect children:

const arr = [
    { id: 1, parent_id: 0, title: 'Movies' },
    { id: 2, parent_id: 0, title: 'Music' },
    { id: 3, parent_id: 1, title: 'Russian movies' },
    { id: 4, parent_id: 2, title: 'Russian music' },
    { id: 5, parent_id: 3, title: 'New' },
    { id: 6, parent_id: 3, title: 'Top10' },
    { id: 7, parent_id: 4, title: 'New' },
    { id: 8, parent_id: 4, title: 'Top10' },
    { id: 9, parent_id: 0, title: 'Soft' }
];

const generateChild = arr => {
    return arr.reduce((acc, val, ind, array) => {
        const childs = [];
        array.forEach((el, i) => {
            if(childs.includes(el.parent_id) || el.parent_id === val.id){
                childs.push(el.id);
            };
        });
        return acc.concat({...val, childs});
    }, []);
};

console.log(generateChild(arr));

[
    { id: 1, parent_id: 0, title: 'Movies', childs: [ 3, 5, 6 ] },
    { id: 2, parent_id: 0, title: 'Music', childs: [ 4, 7, 8 ] },
    { id: 3, parent_id: 1, title: 'Russian movies', childs: [ 5, 6 ] },
    { id: 4, parent_id: 2, title: 'Russian music', childs: [ 7, 8 ] },
    { id: 5, parent_id: 3, title: 'New', childs: [] },
    { id: 6, parent_id: 3, title: 'Top10', childs: [] },
    { id: 7, parent_id: 4, title: 'New', childs: [] },
    { id: 8, parent_id: 4, title: 'Top10', childs: [] },
    { id: 9, parent_id: 0, title: 'Soft', childs: [] }
]

Alternative Approach with Helper Function

Here's a cleaner implementation using a helper function for better readability:

const generateChildWithHelper = arr => {
    const findAllChildren = (parentId) => {
        const directChildren = arr.filter(item => item.parent_id === parentId);
        const allChildren = [...directChildren];
        
        directChildren.forEach(child => {
            allChildren.push(...findAllChildren(child.id));
        });
        
        return allChildren;
    };
    
    return arr.map(item => ({
        ...item,
        childs: findAllChildren(item.id).map(child => child.id)
    }));
};

console.log(generateChildWithHelper(arr));

[
    { id: 1, parent_id: 0, title: 'Movies', childs: [ 3, 5, 6 ] },
    { id: 2, parent_id: 0, title: 'Music', childs: [ 4, 7, 8 ] },
    { id: 3, parent_id: 1, title: 'Russian movies', childs: [ 5, 6 ] },
    { id: 4, parent_id: 2, title: 'Russian music', childs: [ 7, 8 ] },
    { id: 5, parent_id: 3, title: 'New', childs: [] },
    { id: 6, parent_id: 3, title: 'Top10', childs: [] },
    { id: 7, parent_id: 4, title: 'New', childs: [] },
    { id: 8, parent_id: 4, title: 'Top10', childs: [] },
    { id: 9, parent_id: 0, title: 'Soft', childs: [] }
]

How It Works

The algorithm works by iterating through each object and finding all its descendants:

• For each object, it searches for direct children (objects with matching parent_id)
• Then recursively finds children of those children to get all descendants
• The result includes only the IDs of all direct and indirect children

Conclusion

Both approaches successfully generate child keys by parent keys in a hierarchical array structure. The recursive helper function approach provides better code organization and readability for complex hierarchies.