How to create Navigation Menu JSON dynamically from array of routes

Question

Need the below given input in the given output format. How can I use a brute force approach and dynamic programming approach for this? I tried but could not get any clue how to proceed.

INPUT

[
    "Application/Calendar",
    "Application/Chrome",
    "Application/Webstrom",
    "Application/Photoshop",
    "Application/firefox",
    "Documents/Material-UI/src/index.js",
    "Documents/Material-UI/src/tree-view.js"
]

OUTPUT

[
    {
        "name": "Application",
        "children": [
            {
                "name": "Calendar",
                "children": []
            },
            {
                "name": "Chrome",
                "children": []
            },
            {
                "name": "Webstrom",
                "children": []
            },
            {
                "name": "Photoshop",
                "children": []
            },
            {
                "name": "firefox",
                "children": []
            }
        ]
    },
    {
        "name": "Documents",
        "children": [
            {
                "name": "Material-UI",
                "children": [
                    {
                        "name": "src",
                        "children": [
                            {
                                "name": "index.js",
                                "children": []
                            },
                            {
                                "name": "tree-view.js",
                                "children": []
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer, Jul 11 '21 at 14:24

score 1 · Answer 1 · edited Jul 11 '21 at 14:23

1

You could try this approach:

let category = [
    "Application/Calendar",
    "Application/Chrome",
    "Application/Webstrom",
    "Application/Photoshop",
    "Application/firefox",
    "Documents/Material-UI/src/index.js",
    "Documents/Material-UI/src/tree-view.js"
].map(str => str.split("/"));

let result = [];
for (const names of category) names.reduce((children, name) => {
    let next = children.find(item => item.name == name);
    if (!next) children.push(next = { name, children: [] })
    return next.children;
}, result)
console.log(result)

edited Jul 11 '21 at 14:23

halfer

19,824
17
99
186

answered Jul 05 '21 at 17:37

Nur

2,361
2
16
34

Hey Nur, Thanks for such a quick response. Yes, I tried but could not get solution and it's never my intention to get the solution without trying. Even after posting the question I got the response but comparing to your solution that is useless. Your solution is very impressive. Thanks! – Vivek Singh Jul 06 '21 at 04:56
does it answer you question ? – Nur Jul 06 '21 at 09:56
Hey Nur, of course, it did. Your solution is working as expected. – Vivek Singh Jul 06 '21 at 12:29
2

@VivekSingh: I think Nur was suggesting that you could accept the answer. To "accept", click the tick/check mark adjacent to the answer. It is not mandatory to do it, but it is encouraged. It is a nice way to thank the person who helped you, and it signposts the answer as helpful for future readers. – halfer Jul 11 '21 at 14:28

How to create Navigation Menu JSON dynamically from array of routes

1 Answers1