Salman Zafar
Reputation: 4035
How to dynamically create nested infinite sub nested array of objects based on nested array of objects
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
Upvotes: 0
Views: 473
Answers (2)
Nina Scholz
Reputation: 386654
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; }Upvotes: 1
KaKi87
Reputation: 945
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.
Upvotes: 1
Related Questions
- Javascript: how to dynamically create nested objects using object names given by an array
- create nested object from object of arrays
- How i can create object with nested arrays of objects by array of nested objects
- Create array data structure from nested object of arrays in JS
- Create a nested object with children from array of arrays
- Javascript/nodejs dynamically build JS object with nested arrays
- Create an array of array's of object from Nested Objects
- Create nested array of object upto a limit
- JavaScript - How to dynamically create a nested array of objects?
- Javascript/ES6 generate nested array from 1 level object