Петля для отображения иерархических данных

Question

Я создаю массив из сути иерархических данных, например, как показано ниже:

[ 
    {id: 1, title: 'hello', parent: 0, children: [ 
     {id: 3, title: 'hello', parent: 1, children: [ 
      {id: 4, title: 'hello', parent: 3, children: [ 
       {id: 5, title: 'hello', parent: 4}, 
       {id: 6, title: 'hello', parent: 4} 
      ]}, 
      {id: 7, title: 'hello', parent: 3} 
     ]} 
    ]}, 
    {id: 2, title: 'hello', parent: 0, children: [ 
     {id: 8, title: 'hello', parent: 2} 
    ]} 
] 

Я ищу Переберите массив, но не может получить мою голову вокруг того, как recursive loop down, чтобы создать неупорядоченный список, где каждый дочерний уровень имеет отступы. Попытка сделать это в JavaScript, но нужно нажать в правильном направлении для построения цикла, чтобы развернуться, пока не будет больше детей, а затем вернитесь к верхнему массиву.

Любая помощь будет оценена по достоинству.

Answer 1

Я ответил на вопрос об этом перед тем

Вот демо для него: http://jsfiddle.net/zn2C7/7/

var list = $("<ul>"); 
function populatedata() { 
    $.each(data.FolderList, function (i, folder) {     
     if (folder.ParentFolderID == -1) { 
      var item = $("<li>").html(folder.FolderName); 

      list.append(item); 
      var children = $('<ul>'); 
      item.append(children); 
      checkChild(folder.FolderID, children);      
     } 

    }); 
    $('body').append(list); 
} 

function checkChild(parentid, parent) { 
    $.each(data.FolderList, function (i, folder) { 
     if (folder.ParentFolderID == parentid) { 
      var item = $("<li>").html(folder.FolderName);      
      var children = $('<ul>'); 
      parent.append(item); 
      item.append(children); 
      checkChild(folder.FolderID, children);      
     } 
     else { 
      return ; 
     } 
    }); 
} 

можно было построить его с помощью переменной HTML, как вы пытались сделать это, но это намного проще в использовании DOM манипуляции функции JQuery ($('<ul>') and $('<li>') - create new element, .append() - append element to some other element)

function checkChild(parentid) { 
     $.each(data.FolderList, function (i, folder) { 

      if (folder.ParentFolderID == parentid) { 
       html += '<li><ul>' + folder.FolderName; 
       checkChild(folder.FolderID); 
       html+=</ul></li> 
       return html; 
      } 
      else { 
       return ; 
      } 
     }); 
    } 

Кроме того, обратите внимание, что в коде выше вы делаете возврат HTML; от каждой функции обратного вызова. Не уверен, что вы хотели получить точно, но в .each он может работать как перерыв в регулярном цикле (если вы вернете false):

Мы можем остановить цикл из функции обратного вызова, вернув false.

Это из страницы jquery api.

Кроме того, для таких задач я предпочитаю использовать отладчик. В настоящий момент есть много мощных инструментов для отладки HTML/CSS/JS в браузере. Просто нажмите F12 в Chrome, IE или FF (для последнего вам может понадобиться установить расширение Firebug), и вы получите много полезных функций наряду с простой отладкой JS.