JavaScript - update deeply nested array of objects with the target path

Question

The nesting level is always unknown, and children can be either undefined or an array with at least one item. Each key is always unique. This would be an example:

const arr = [{
    key: '001',
    children: [{
        key: 'abc',
        children: [{
            key: 'ee',
            children: [{
                key: 'goc',
            }, {
                key: 'zzv',
                children: [{
                    key: '241',
                }],
            }],
        }],
    }, {
        key: '125',
        children: undefined,
    }],
}, {
    key: '003',
    children: [{
        key: 'ahge',
    }, {
        key: '21521',
    }],
}];

I'd like to write a function that receives a key to find the element and then updates its children field with the given children array and then returns the whole arr.

// Function that returns arr with updated the target element - how can I write this?
const mysteryFn = (arr, key, childrenToUpdate) => {
 // Do something..

 return arr;
}


const key = 'goc';
const childrenToUpdate = [{
 key: '12345',
}, {
 key: '25221a',
}];

const newArr = mysteryFn(arr, key, childrenToUpdate);

// expected newArr
const newArr= [{
    key: '001',
    children: [{
        key: 'abc',
        children: [{
            key: 'ee',
            children: [{
                key: 'goc',
                children: [{
                    key: '12345',
                }, {
                    key: '25221a',
                }],
            }, {
                key: 'zzv',
                children: [{
                    key: '241',
                }],
            }],
        }],
    }, {
        key: '125',
        children: undefined,
    }],
}, {
    key: '003',
    children: [{
        key: 'ahge',
    }, {
        key: '21521',
    }],
}];

Dean · Accepted Answer · 2022-07-11 19:06:31Z

1

This can be achieved with recursion.

const mysteryFn = (arr, key, childrenToUpdate) => {
    // if children are undefined
    if (!arr) return;

    // loop over each entry and its children to find 
    // entry with passed key
    arr.forEach((entry) => {
        if (entry.key === key) {
            entry.children = childrenToUpdate;
        }

        // recursive call to traverse children
        mysteryFn(entry.children, key, childrenToUpdate);
    });

    return arr;
};

answered Jul 11, 2022 at 19:06

Dean

5513 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript - update deeply nested array of objects with the target path

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related