Create a menu tree using JavaScript?

Question

I have an requirement to create a tree structure menu from a . separated string array.

My out put should be like following

I am trying to implement that with the following script

        <script>
            function fnAppend(param) {
                var  cWin=window.open("","Categories","width=600,height=800,scrollbars=yes");
                var array = ['A.A1.A2', 'A.A1.A3', 'A.B1.B2','C.C1.C2','B.B1.B2','B.B1.B3.B4','C4'],
                tree = [],
                levels = [tree],
                last = [];

                array.forEach(s => {
                    var temp = s.split('.');
                    temp.forEach((name, i) => {
                        if (last[i] === name) return;        
                        levels[i].push({ name, children: levels[i + 1] = [] });
                    });
                    last = temp;
                });

                function traverse(arr) {
                    for (const branch of arr) {
                        console.log('Mother:', branch.name);
                        var ul=document.createElement('ul');
                        var li=document.createElement('li');
                        li.innerHTML="<a href=''>"+branch.name+"</a>";
                        ul.appendChild(li);
                        if (Array.isArray(branch.children) && branch.children.length > 0) {
                            console.log('Children:', branch.children.map(i => i.name).join(', '));
                            traverse(branch.children);
                        }
                    }
                    var list = document.createElement('div');
                    list.appendChild(ul);
                    try {
                        cWin.document.body.appendChild(list);
                    } catch (err) {
                        if (list.outerHTML) {
                            cWin.document.body.innerHTML = list.outerHTML;
                        } else {
                            console.log(err.name);
                        }
                    }
                }
                traverse(tree);
            }
        </script>
        </head>

        <body>
            <ul id="mylist">

            </ul>
            <input type="button" value="Append child" onclick="fnAppend('test')" />
        </body>

Using above script I am getting the following output

A3
B2
B1
C2
C1
B4
B3
B1
C4

Please help me to format the output. Many thanks in advance.

Regards, Pankaj

Nina Scholz · Accepted Answer · 2019-03-11 11:56:21Z

1

You could create tree and build a nested list with items.

function buildList(tree, target) {
    var ul = document.createElement('ul');
    tree.forEach(node => {
        var li = document.createElement('li');
        li.appendChild(document.createTextNode(node.name));
        node.children.length && buildList(node.children, li);
        ul.appendChild(li);
    });
    target.appendChild(ul);
}


var array = ['A.A1.A2', 'A.A1.A3', 'A.B1.B2','C.C1.C2','B.B1.B2','B.B1.B3.B4','C4'],
    tree = [];

array.forEach(s => s.split('.').reduce((t, name) => {
    var temp = t.find(o => o.name === name);
    if (!temp) {
        t.push(temp = { name, children: [] });
    }
    return temp.children;
}, tree));

console.log(tree);

buildList(tree, document.body);

A different approach wich works only if pop ups are allowed.

function open() {
    var cWin = window.open("", "Categories", "width=600,height=800,scrollbars=yes");

    cWin.document.write(buildList(tree).outerHTML);
}

function buildList(tree) {
    if (!tree.length) return;
    var ul = document.createElement('ul');
    tree.forEach(node => {
        var li = document.createElement('li'),
            children = buildList(node.children);
        li.appendChild(document.createTextNode(node.name));
        if (children) li.appendChild(children);
        ul.appendChild(li);
    });
    return ul;
}


var array = ['A.A1.A2', 'A.A1.A3', 'A.B1.B2','C.C1.C2','B.B1.B2','B.B1.B3.B4','C4'],
    tree = [];

array.forEach(s => s.split('.').reduce((t, name) => {
    var temp = t.find(o => o.name === name);
    if (!temp) {
        t.push(temp = { name, children: [] });
    }
    return temp.children;
}, tree));

console.log(tree);

<button onclick="open()">popup</button>

edited Mar 11, 2019 at 11:56

answered Mar 11, 2019 at 8:23

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

16 Comments

Pankaj Karmakar Over a year ago

Hi Nina, Thank you very much for your response.It will working fine but I have another question, if I need to open the tree in a new window, how to do that?

Nina Scholz Over a year ago

@PankajKarmakar, please try the last one outside of stack snippets.

Pankaj Karmakar Over a year ago

Its working but if you check my code there I have to open the new window with menu once I have click on a button.

Pankaj Karmakar Over a year ago

Hi Nina,Is there any way to append a class to next li of each parant and also need to add <a> to all the end child li of every parent.

Nina Scholz Over a year ago

you could add this in the forEach callback.

|

Collectives™ on Stack Overflow

Create a menu tree using JavaScript?

1 Answer 1

16 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Related