@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>
  • Вопрос задан
  • 2455 просмотров
Решения вопроса 1
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
рекурсия или поиск в ширину (последнее желательно, но можно обойтись и обычной рекурсией если у вас дерево не сильно большой вложенности).

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'>;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
barkalov
@barkalov
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы