How to dynamically create nested infinite sub nested array of objects based on nested array of objects

Question

i have a scenario where i have to build a deep nested navigation with infinite levels based on parent child response. i tried to write a recursive function to solve this issue but it work with 2 levels but not after that. The function is working fine i keep settings out but i make it a sub child of talent then its returning empty array.

current input:

{
    "d": [
        {
            "name": null,
            "type": null,
            "description": null,
            "route": {
                "key": "talent",
                "icon": "SupervisorAccountIcon",
                "name": "Talent",
                "type": "collapse"
            },
            "navigationId": null,
            "moduleId": 1,
            "sub_navigations": [
                {
                    "id": 4,
                    "name": null,
                    "type": null,
                    "description": null,
                    "route": {
                        "key": "job-management",
                        "icon": "EngineeringIcon",
                        "name": "Job Management"
                    },
                    "createdAt": "2022-06-27T16:59:57.000Z",
                    "updatedAt": "2022-08-25T08:04:04.000Z",
                    "deletedAt": null,
                    "navigationId": 3,
                    "moduleId": 1,
                    "sub_navigations": [
                        {
                            "id": 5,
                            "name": "Manage Segments",
                            "type": null,
                            "description": null,
                            "route": {
                                "key": "manage-segments",
                                "name": "Manage Segments",
                                "type": "collapse",
                                "route": "/views/manage-segments",
                                "comp_name": "ManageSegments"
                            },
                            "createdAt": "2022-06-27T17:00:25.000Z",
                            "updatedAt": "2022-08-25T08:04:04.000Z",
                            "deletedAt": null,
                            "navigationId": 4,
                            "moduleId": 1
                        },
                        {
                            "id": 6,
                            "name": "Manage Values",
                            "type": null,
                            "description": null,
                            "route": {
                                "key": "manage-values",
                                "name": "Manage Values",
                                "type": "collapse",
                                "route": "/views/manage-values",
                                "comp_name": "ManageValues"
                            },
                            "createdAt": "2022-06-27T17:00:25.000Z",
                            "updatedAt": "2022-08-25T08:04:04.000Z",
                            "deletedAt": null,
                            "navigationId": 4,
                            "moduleId": 1
                        },
                        {
                            "id": 12,
                            "name": "Job Description",
                            "type": null,
                            "description": null,
                            "route": {
                                "key": "job-description",
                                "name": "Job Description",
                                "type": "collapse",
                                "route": "views/job-description",
                                "comp_name": "JobDescription",
                                "isVisible": false
                            },
                            "properties": null,
                            "createdAt": "2022-06-27T17:00:25.000Z",
                            "updatedAt": "2022-08-25T08:04:04.000Z",
                            "deletedAt": null,
                            "navigationId": 4,
                            "moduleId": 1
                        },
                        {
                            "id": 13,
                            "name": "Manage Jobs",
                            "type": null,
                            "description": null,
                            "route": {
                                "key": "manage-jobs",
                                "name": "Manage Jobs",
                                "type": "collapse",
                                "route": "/views/manage-jobs",
                                "comp_name": "ManageJobs"
                            },
                            "createdAt": "2022-06-27T17:00:25.000Z",
                            "updatedAt": "2022-08-25T08:04:04.000Z",
                            "deletedAt": null,
                            "navigationId": 4,
                            "moduleId": 1
                        }
                    ]
                },
                {
                    "name": null,
                    "type": null,
                    "description": null,
                    "route": {
                        "key": "settings",
                        "icon": "SettingsIcon",
                        "name": "Settings",
                        "type": "collapse"
                    },
                    "navigationId": null,
                    "moduleId": 1,
                    "sub_navigations": [
                        {
                            "id": 8,
                            "name": null,
                            "type": null,
                            "description": null,
                            "route": {
                                "key": "setup-and-maintenance",
                                "icon": "SettingsIcon",
                                "name": "Setup & Maintenance",
                                "type": "collapse"
                            },
                            "properties": null,
                            "createdAt": "2022-06-27T17:00:25.000Z",
                            "updatedAt": "2022-08-25T08:04:04.000Z",
                            "deletedAt": null,
                            "navigationId": 7,
                            "moduleId": 1,
                            "sub_navigations": [
                                {
                                    "id": 9,
                                    "name": "Organization Structure",
                                    "type": null,
                                    "description": null,
                                    "route": {
                                        "key": "org-struct",
                                        "name": "Structure Management",
                                        "type": "collapse",
                                        "route": "/views/org-struct",
                                        "comp_name": "ManageOrgStructure"
                                    },
                                    "createdAt": "2022-06-27T17:00:25.000Z",
                                    "updatedAt": "2022-08-25T08:04:04.000Z",
                                    "deletedAt": null,
                                    "navigationId": 8,
                                    "moduleId": 1
                                },
                                {
                                    "id": 10,
                                    "name": "Manage Roles",
                                    "type": null,
                                    "description": null,
                                    "route": {
                                        "key": "manage-roles",
                                        "name": "Functional Security",
                                        "type": "collapse",
                                        "route": "/views/manage-roles",
                                        "comp_name": "ManageRoles"
                                    },
                                    "createdAt": "2022-06-27T17:00:25.000Z",
                                    "updatedAt": "2022-08-25T08:04:04.000Z",
                                    "deletedAt": null,
                                    "navigationId": 8,
                                    "moduleId": 1
                                },
                                {
                                    "id": 14,
                                    "name": "Manage Workflow Access",
                                    "type": null,
                                    "description": null,
                                    "route": {
                                        "key": "manage-workflow-access",
                                        "name": "Approval Setup",
                                        "type": "collapse",
                                        "route": "/views/manage-workflow-access",
                                        "comp_name": "ManageWorkflowAccess"
                                    },
                                    "createdAt": "2022-06-27T17:00:25.000Z",
                                    "updatedAt": "2022-08-25T08:04:04.000Z",
                                    "deletedAt": null,
                                    "navigationId": 8,
                                    "moduleId": 1
                                },
                                {
                                    "id": 17,
                                    "name": "Navigation",
                                    "type": null,
                                    "description": null,
                                    "route": {
                                        "key": "navigations",
                                        "name": "UI Properties",
                                        "type": "collapse",
                                        "route": "/views/navigations",
                                        "comp_name": "Navigations"
                                    },
                                    "createdAt": "2022-08-01T07:20:16.000Z",
                                    "updatedAt": "2022-08-25T08:04:04.000Z",
                                    "deletedAt": null,
                                    "navigationId": 8,
                                    "moduleId": 1
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "name": "Users",
            "type": null,
            "description": null,
            "route": {
                "key": "users",
                "icon": "AccountCircleIcon",
                "name": "Users and Data Security",
                "type": "collapse",
                "route": "/views/users",
                "comp_name": "User",
                "noCollapse": true
            },
            "navigationId": null,
            "moduleId": 1,
            "sub_navigations": []
        }
    ]
]

Current Implementation:

const dynamicNavigations = async (navigations, pagePermissions) => {
    const finalRoutes = []
    for (const nav of navigations)
    {
        const navJson = await isValidJSON(nav.route)
        if (nav.sub_navigations && nav.sub_navigations.length > 0) {
            navJson['collapse'] = []
            navJson['collapse'] = await dynamicNavigations(nav.sub_navigations, pagePermissions)
            finalRoutes.push(navJson)
        }
        else{
            if (await findPageByKey(pagePermissions, navJson))
                finalRoutes.push(await isValidJSON(navJson))
        }
    }

    return finalRoutes
}

Current Output:

{
    "data": [
        {
            "key": "talent",
            "icon": "SupervisorAccountIcon",
            "name": "Talent",
            "type": "collapse",
            "collapse": [
                {
                    "key": "job-management",
                    "icon": "EngineeringIcon",
                    "name": "Job Management",
                    "collapse": [
                        {
                            "key": "manage-segments",
                            "name": "Manage Segments",
                            "type": "collapse",
                            "route": "/views/manage-segments",
                            "comp_name": "ManageSegments"
                        },
                        {
                            "key": "manage-values",
                            "name": "Manage Values",
                            "type": "collapse",
                            "route": "/views/manage-values",
                            "comp_name": "ManageValues"
                        },
                        {
                            "key": "job-description",
                            "name": "Job Description",
                            "type": "collapse",
                            "route": "views/job-description",
                            "comp_name": "JobDescription",
                            "isVisible": false
                        },
                        {
                            "key": "manage-jobs",
                            "name": "Manage Jobs",
                            "type": "collapse",
                            "route": "/views/manage-jobs",
                            "comp_name": "ManageJobs"
                        }
                    ]
                },
                {
                    "key": "settings",
                    "icon": "SettingsIcon",
                    "name": "Settings",
                    "type": "collapse",
                    "collapse": [
                        {
                            "key": "setup-and-maintenance",
                            "icon": "SettingsIcon",
                            "name": "Setup & Maintenance",
                            "type": "collapse",
                            "collapse": []
                        }
                    ]
                }
            ]
        },
        {
            "key": "users",
            "icon": "AccountCircleIcon",
            "name": "Users and Data Security",
            "type": "collapse",
            "route": "/views/users",
            "comp_name": "User",
            "noCollapse": true
        }
    ]
}

expected output:

{
    "data": [
        {
            "key": "talent",
            "icon": "SupervisorAccountIcon",
            "name": "Talent",
            "type": "collapse",
            "collapse": [
                {
                    "key": "job-management",
                    "icon": "EngineeringIcon",
                    "name": "Job Management",
                    "collapse": [
                        {
                            "key": "manage-segments",
                            "name": "Manage Segments",
                            "type": "collapse",
                            "route": "/views/manage-segments",
                            "comp_name": "ManageSegments"
                        },
                        {
                            "key": "manage-values",
                            "name": "Manage Values",
                            "type": "collapse",
                            "route": "/views/manage-values",
                            "comp_name": "ManageValues"
                        },
                        {
                            "key": "job-description",
                            "name": "Job Description",
                            "type": "collapse",
                            "route": "views/job-description",
                            "comp_name": "JobDescription",
                            "isVisible": false
                        },
                        {
                            "key": "manage-jobs",
                            "name": "Manage Jobs",
                            "type": "collapse",
                            "route": "/views/manage-jobs",
                            "comp_name": "ManageJobs"
                        }
                    ]
                },
                {
                    "key": "settings",
                    "icon": "SettingsIcon",
                    "name": "Settings",
                    "type": "collapse",
                    "collapse": [
                        {
                            "key": "setup-and-maintenance",
                            "icon": "SettingsIcon",
                            "name": "Setup & Maintenance",
                            "type": "collapse",
                            "collapse": [
                                {
                                    "key": "org-struct",
                                    "name": "Structure Management",
                                    "type": "collapse",
                                    "route": "/views/org-struct",
                                    "comp_name": "ManageOrgStructure"
                                },
                                {
                                    "key": "manage-roles",
                                    "name": "Functional Security",
                                    "type": "collapse",
                                    "route": "/views/manage-roles",
                                    "comp_name": "ManageRoles"
                                },
                                {
                                    "key": "manage-workflow-access",
                                    "name": "Approval Setup",
                                    "type": "collapse",
                                    "route": "/views/manage-workflow-access",
                                    "comp_name": "ManageWorkflowAccess"
                                },
                                {
                                    "key": "navigations",
                                    "name": "UI Properties",
                                    "type": "collapse",
                                    "route": "/views/navigations",
                                    "comp_name": "Navigations"
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "key": "users",
            "icon": "AccountCircleIcon",
            "name": "Users and Data Security",
            "type": "collapse",
            "route": "/views/users",
            "comp_name": "User",
            "noCollapse": true
        }
    ]
}

Any Help or guidance will be appreciated.

Thanks

If I understand correctly, your input is what you labeled current data, but what you want as output is what you labeled expected data with deep indefinite nesting or what you labeled expected output ? — KaKi87
– KaKi87, Commented Aug 29, 2022 at 14:04
@KaKi87 current data means current input and expected data means what can/will be the expected input and result of expected data should/will be based on expected input/data and vice versa. — Salman Zafar
– Salman Zafar, Commented Aug 29, 2022 at 16:45
I'm sorry I still don't get it 😅 What do you want the function to handle as input and to return as output ? — KaKi87
– KaKi87, Commented Aug 30, 2022 at 8:55

KaKi87 · Accepted Answer · 2022-08-31 10:31:51Z

1

Demo

Assuming the INPUT variable is defined beforehand :

const
   mapCallback = item => ({
       ...item.route,
       collapse: item.sub_navigations && item.sub_navigations.length ? item.sub_navigations.map(mapCallback) : undefined
   }),
   OUTPUT = {
       data: INPUT.d.map(mapCallback)
   };

The OUTPUT variable contains exactly what you expect.

answered Aug 31, 2022 at 10:31

KaKi87

9557 silver badges17 bronze badges

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

4 Comments

Salman Zafar Over a year ago

tried but not working if input is this: gist.github.com/salmanzafar949/5837803dacb9c9f3a0ed21c61398cc1e

KaKi87 Over a year ago

This input doesn't have the same structure as the one you attached to your question. If you want a function that handles this one, please create a new question and attach the expected output.

Salman Zafar Over a year ago

Even with the same input gist.github.com/salmanzafar949/5837803dacb9c9f3a0ed21c61398cc1e its not working

KaKi87 Over a year ago

That input works. Demo

Nina Scholz · Accepted Answer · 2022-09-02 14:07:13Z

For formatting you could just take route and map possible sub_navigations as collapse.

const
    format = ({ route, sub_navigations: sub }) =>
        ({ ...route, ...(sub?.length && { collapse: sub.map(format) }) }),
    data = { d: [{ name: null, type: null, description: null, route: { key: "talent", icon: "SupervisorAccountIcon", name: "Talent", type: "collapse" }, navigationId: null, moduleId: 1, sub_navigations: [{ id: 4, name: null, type: null, description: null, route: { key: "job-management", icon: "EngineeringIcon", name: "Job Management" }, createdAt: "2022-06-27T16:59:57.000Z", updatedAt: "2022-08-25T08:04:04.000Z", deletedAt: null, navigationId: 3, moduleId: 1, sub_navigations: [{ id: 5, name: "Manage Segments", type: null, description: null, route: { key: "manage-segments", name: "Manage Segments", type: "collapse", route: "/views/manage-segments", comp_name: "ManageSegments" }, createdAt: "2022-06-27T17:00:25.000Z", updatedAt: "2022-08-25T08:04:04.000Z", deletedAt: null, navigationId: 4, moduleId: 1 }, { id: 6, name: "Manage Values", type: null, description: null, route: { key: "manage-values", name: "Manage Values", type: "collapse", route: "/views/manage-values", comp_name: "ManageValues" }, createdAt: "2022-06-27T17:00:25.000Z", updatedAt: "2022-08-25T08:04:04.000Z", deletedAt: null, navigationId: 4, moduleId: 1 }, { id: 12, name: "Job Description", type: null, description: null, route: { key: "job-description", name: "Job Description", type: "collapse", route: "views/job-description", comp_name: "JobDescription", isVisible: false }, properties: null, createdAt: "2022-06-27T17:00:25.000Z", updatedAt: "2022-08-25T08:04:04.000Z", deletedAt: null, navigationId: 4, moduleId: 1 }, { id: 13, name: "Manage Jobs", type: null, description: null, route: { key: "manage-jobs", name: "Manage Jobs", type: "collapse", route: "/views/manage-jobs", comp_name: "ManageJobs" }, createdAt: "2022-06-27T17:00:25.000Z", updatedAt: "2022-08-25T08:04:04.000Z", deletedAt: null, navigationId: 4, moduleId: 1 }] }, { name: null, type: null, description: null, route: { key: "settings", icon: "SettingsIcon", name: "Settings", type: "collapse" }, navigationId: null, moduleId: 1, sub_navigations: [{ id: 8, name: null, type: null, description: null, route: { key: "setup-and-maintenance", icon: "SettingsIcon", name: "Setup & Maintenance", type: "collapse" }, properties: null, createdAt: "2022-06-27T17:00:25.000Z", updatedAt: "2022-08-25T08:04:04.000Z", deletedAt: null, navigationId: 7, moduleId: 1, sub_navigations: [{ id: 9, name: "Organization Structure", type: null, description: null, route: { key: "org-struct", name: "Structure Management", type: "collapse", route: "/views/org-struct", comp_name: "ManageOrgStructure" }, createdAt: "2022-06-27T17:00:25.000Z", updatedAt: "2022-08-25T08:04:04.000Z", deletedAt: null, navigationId: 8, moduleId: 1 }, { id: 10, name: "Manage Roles", type: null, description: null, route: { key: "manage-roles", name: "Functional Security", type: "collapse", route: "/views/manage-roles", comp_name: "ManageRoles" }, createdAt: "2022-06-27T17:00:25.000Z", updatedAt: "2022-08-25T08:04:04.000Z", deletedAt: null, navigationId: 8, moduleId: 1 }, { id: 14, name: "Manage Workflow Access", type: null, description: null, route: { key: "manage-workflow-access", name: "Approval Setup", type: "collapse", route: "/views/manage-workflow-access", comp_name: "ManageWorkflowAccess" }, createdAt: "2022-06-27T17:00:25.000Z", updatedAt: "2022-08-25T08:04:04.000Z", deletedAt: null, navigationId: 8, moduleId: 1 }, { id: 17, name: "Navigation", type: null, description: null, route: { key: "navigations", name: "UI Properties", type: "collapse", route: "/views/navigations", comp_name: "Navigations" }, createdAt: "2022-08-01T07:20:16.000Z", updatedAt: "2022-08-25T08:04:04.000Z", deletedAt: null, navigationId: 8, moduleId: 1 }] }] }] }, { name: "Users", type: null, description: null, route: { key: "users", icon: "AccountCircleIcon", name: "Users and Data Security", type: "collapse", route: "/views/users", comp_name: "User", noCollapse: true }, navigationId: null, moduleId: 1, sub_navigations: [] }] },
    result = { data: data.d.map(format) };

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

tried but not working if input is this: gist.github.com/salmanzafar949/5837803dacb9c9f3a0ed21c61398cc1e
where is the difference? please take a **small**(!!!) amount of data for the question!

Collectives™ on Stack Overflow

How to dynamically create nested infinite sub nested array of objects based on nested array of objects

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related