How to traverse a hierarchical tree to generate an HTML

3

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

Follow JavaSript / JSON code:

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 -.- '

    
asked by anonymous 28.07.2017 / 20:14

2 answers

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);
    
28.07.2017 / 20:23
2

You can go that way

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

    
28.07.2017 / 20:20