How to traverse a hierarchical tree to generate an HTML

Question

I’m having trouble generating a function responsible for traversing and returning a hierarchical tree.

Follow code Javasript/JSON:

---

let tree = {
    label: 'Elemento A',
    itens: [
        {
            label: 'Elemento A1',
            itens: [
                {
                    label: 'Elemento A1a',
                    itens: [
                        {
                            label: 'Elemento A1a1'
                        },
                        {
                            label: 'Elemento A1a2'
                        }
                    ]
                },
                {
                    label: 'Elemento A1b'
                }
            ]
        },
        {
            label: 'Elemento A2',
            itens: [
                {
                    label: 'Elemento A2a'
                },
                {
                    label: 'Elemento A2b'
                }
            ]
        }
    ]
}

I need a recursive function to traverse this array -.-'

Answer 1

You can walk like this

let tree = {
    label: 'Elemento A',
    itens: [
        {
            label: 'Elemento A1',
            itens: [
                {
                    label: 'Elemento A1a',
                    itens: [
                        {
                            label: 'Elemento A1a1'
                        },
                        {
                            label: 'Elemento A1a2'
                        }
                    ]
                },
                {
                    label: 'Elemento A1b'
                }
            ]
        },
        {
            label: 'Elemento A2',
            itens: [
                {
                    label: 'Elemento A2a'
                },
                {
                    label: 'Elemento A2b'
                }
            ]
        }
    ]
};

function mostrarConteudo(obj) {
  Object.keys(obj).forEach(function(chave) {
    var prop = obj[chave];
    if (typeof prop === 'object') mostrarConteudo(prop, chave);
    else console.log('<label>' + prop + '</label>');
  });
}

mostrarConteudo(tree);

Function credits Sergio

Answer 2

With this solution you can browse and generate the desired HTML.

let tree = {
        label: 'Elemento A',
        itens: [
            {
                label: 'Elemento A1',
                itens: [
                    {
                        label: 'Elemento A1a',
                        itens: [
                            {
                                label: 'Elemento A1a1'
                            },
                            {
                                label: 'Elemento A1a2'
                            }
                        ]
                    },
                    {
                        label: 'Elemento A1b'
                    }
                ]
            },
            {
                label: 'Elemento A2',
                itens: [
                    {
                        label: 'Elemento A2a'
                    },
                    {
                        label: 'Elemento A2b'
                    }
                ]
            }
        ]
    }


    let html = '<ul class="main-level">';

    (function printTree(tree, index) {
        html += `<li><span class="tree-label">${tree.label}</span>`;

        if(tree.itens) {
            html += `<ul class="sub-level-${index}">`;
            tree.itens.forEach((subtree, index) => printTree(subtree, index + 1));
            html += '</ul>';
        }

        html += '</li>';
    })(tree, 0);

    html += '</ul>';

    console.log(html);