Javascript 循环以显示分层数据

我正在使用基本上分层的数据创建一个数组，例如：

[
    {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}
    ]}
]

我希望循环遍历数组，但无法了解如何递归地向下循环以创建一个无序列表，其中每个子级别都缩进。 尝试在JavaScript中实现这一点，但需要在正确的方向上推动循环的构造，以向下钻取，直到不再有子循环，然后返回到顶部数组

---

任何帮助都将不胜感激。

我以前回答过一个关于这方面的问题

下面是它的演示：

var list=$（“
”）；
函数populatedata（）{
$.each（data.FolderList，函数（i，文件夹）{
if（folder.ParentFolderID==-1）{
var item=$（“
”）.html（folder.FolderName）；
列表。追加（项目）；
var children=$（“
”）；
项目.附加（儿童）；
checkChild（folder.FolderID，children）；
}
});
$（'body'）。追加（列表）；
}
函数checkChild（parentid，parent）{
$.each（data.FolderList，函数（i，文件夹）{
if（folder.ParentFolderID==parentid）{
var item=$（“
”）.html（folder.FolderName）；
var children=$（“
”）；
父项。追加（项）；
项目.附加（儿童）；
checkChild（folder.FolderID，children）；
}
否则{
返回；
}
});
}

可以使用html变量构建它，就像您尝试这样做一样，但是使用jQuery

（$（'
'）和$（'
'）-create new element、.append（）-append element to some other element）的DOM操纵函数要简单得多。

函数checkChild（parentid）{
$.each（data.FolderList，函数（i，文件夹）{
if（folder.ParentFolderID==parentid）{
html+='
'+folder.FolderName；
checkChild（folder.FolderID）；
html+=
返回html；
}
否则{
返回；
}
});
}

另外，请注意，在上面的代码中，您正在返回html；从每个函数回调。不确定您到底想要得到什么，但在。中，它可能会像常规循环中的中断一样工作（如果您将返回false）：

我们可以通过返回false来停止回调函数中的循环

这是来自jQueryAPI页面的

---

此外，对于此类任务，我更喜欢使用调试器。目前有很多强大的工具可以在浏览器中调试HTML/CSS/JS。只需在Chrome、IE或FF中按F12键（对于最后一个，您可能需要安装Firebug extension），您将获得许多有用的功能以及简单的JS调试。

您的问题还不清楚。您是要将层次结构展平到包含每个节点的数组中，还是要将层次结构写入具有正确缩进的字符串中？（示例JSON是您开始使用的还是希望最终使用的？）

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 ;
        }
    });
}

  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 ;
            }
        });
    }