Как перевести древовидную структуру в строку?

Question

[buzzi888]

Есть дерево (обычный JavaScript объект):

rootNode
|--NodeA
|----NodeA1
|----....
|--NodeB
|----NodeB1
.....

нужно получить строку вида

<div rootNode>
    <div NodeA>
          <div NodeA1></div>
    </div>
    .....
</div>

Псевдокод

var html = '';

//обход дерева
function traverse(node){
   
    // здесь загвоздка
    // нужно вставлять div'ы "втутрь" родительских
    // а сейчас получается "плоское" представление, т.е: 
    // <div>RootNode</div> <div>NodeA</div> <div>NodeA1</div> <div>NodeB</div> .....
    html += '<div>'+node.ID+'<div'>'

    // рекурсивный вызов для дочерних элементов
    traverse(node.childrens);
}

traverse(rootNode);

После первого вызова мы будем иметь:
<div>RootNode</div>

В рекурсии на втором вызове:
<div>RootNode</div> <div>NodeA</div>
а нужно:

<div>RootNode 
     <div>NodeA</div> 
</div>

Answer 1

[Сергей Протько]

рекурсия или поиск в ширину (последнее желательно, но можно обойтись и обычной рекурсией если у вас дерево не сильно большой вложенности).

function buildDOM (node) {
    var html = '<div node-id='+node.ID+'>';
    if (node.childrens.length) {
         node.childrens.forEach(function (childNode) {
               html += buildDOM(childNode);
         }
    }
    return html + '</div'>;
}

Comments

[throughtheether]

>поиск в ширину
Разве не в глубину? Например, на n-ном шаге BFS мы прошли вершины {a,b}, а на n+1-ом шаге - {c,d,e,f}. Как мы различим, какая из вершин {c,d,e,f} является потомком a, а какая - потомком b? Это знание мне представляется критичным для правильного представления дерева в виде строки.

[Сергей Протько]

@throughtheether, да, вы правы. Спасибо что поправили.

Answer 2

[barkalov]

goessner.net/download/prj/jsonxml