使用JavaScript或JQuery从json数据创建动态文件夹层次结构

我的jSon数据结构：

     var data = {
            "FolderList": [
                        {
                            "FolderID": 1,
                            "FolderName": "parent1",
                            "ParentFolderID": -1
                        },
                        {
                            "FolderID": 2,
                            "FolderName": "parent1 Child1",
                            "ParentFolderID": 1
                        },
                        {
                            "FolderID": 3,
                            "FolderName": "parent2",
                            "ParentFolderID": -1
                        },
                        {
                            "FolderID": 4,
                            "FolderName": "parent1 Child1 Child1",
                            "ParentFolderID": 2
                        },
                        {
                            "FolderID": 5,
                            "FolderName": "parent1 Child1 Child2",
                            "ParentFolderID": 2
                        },
                        {
                            "FolderID": 6,
                            "FolderName": "parent2 Child1",
                            "ParentFolderID": 3
                        }
                ]
                    };

现在，我想创建文件夹层次结构html，如下所示：

 parent1
    parent1 child1
      parent1 child1 child1
      parent1 child1 child2   
 parent2
    parent2 child1

        function populatedata() {
             $.each(data.FolderList, function (i, folder) {
                if (folder.ParentFolderID == -1) {
                    html += '<li>' + folder.FolderName;
                    checkChild(folder.FolderID);
                    html += '</li>';
                }

            });
        }

        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代码

父母1

父母子女

父母1子女1子女1
父母1孩子1孩子2




父母2

父母2子女1

如何使用JavaScript或jQuery实现这一点？提前谢谢。我试着使用递归函数，但却被插入中间。但是，我的代码是这样的：

 parent1
    parent1 child1
      parent1 child1 child1
      parent1 child1 child2   
 parent2
    parent2 child1

        function populatedata() {
             $.each(data.FolderList, function (i, folder) {
                if (folder.ParentFolderID == -1) {
                    html += '<li>' + folder.FolderName;
                    checkChild(folder.FolderID);
                    html += '</li>';
                }

            });
        }

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

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

最后，在FAngel的帮助下，通过下面的代码，我创建了项目中实际需要的结构

我修改的代码如下所示：

 parent1
    parent1 child1
      parent1 child1 child1
      parent1 child1 child2   
 parent2
    parent2 child1

        function populatedata() {
             $.each(data.FolderList, function (i, folder) {
                if (folder.ParentFolderID == -1) {
                    html += '<li>' + folder.FolderName;
                    checkChild(folder.FolderID);
                    html += '</li>';
                }

            });
        }

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

函数填充数据（）{
var list=$（“
”）.attr（{class:“collapsablelist”，id:“folder”}）；
$.each（data.FolderList，函数（i，文件夹）{
if（folder.ParentFolderID==-1）{
变量项=$（“
”）。
css（“边框顶部”、“0”）.html（“”+folder.FolderName
+'');
列表。追加（项目）；
var children=$（“
”）；
项目.附加（儿童）；
checkChild（folder.FolderID，children）；
}
});
$（'#folderList'）。追加（列表）；
}
函数checkChild（parentid，parent）{
$.each（data.FolderList，函数（i，文件夹）{
if（folder.ParentFolderID==parentid）{
变量项=$（“
”）。
html（“”+folder.FolderName
+'');
var children=$（“
”）；
父项。追加（项）；
项目.附加（儿童）；
checkChild（folder.FolderID，children）；
}
否则{
返回；
}
});
}

下面是它的演示：

另外，请注意，在上面的代码中，您正在执行

返回html来自
每个
函数回调。不确定您想要得到的确切内容，但在常规循环中，它可能像
break
一样工作（如果您将返回false）：

我们可以通过返回
错

这是来自jQueryAPI页面的

此外，对于此类任务，我更喜欢使用调试器。目前有很多强大的工具可以在浏览器中调试HTML/CSS/JS。只需在Chrome、IE或FF中按F12（对于最后一个，您可能需要安装Firebug扩展），您将获得许多有用的功能以及简单的JS调试
 我已经更新了代码，并按照以下方式解决了问题。如果代码没有任何li元素，则不会创建不必要的ul元素。如果父母没有子女，则无ul

 function populateFolder() {
    var list = $("<ul>").attr({ class: "collapsibleList", id: "folder" });
    $.each(data.FolderList, function (i, folder) {
        if (folder.ParentFolderID == -1) {
            var item = $("<li>").html('<span>' + folder.FolderName +
                        '</span><a href="Docs.html">
                        <div class="view-docs pull-right">View</div></a>');
            checkChild(folder.FolderID, item);
            list.append(item);
    });
    $('#anydiv').append(list);

}

function checkChild(parentid, parent) {
    $.each(data.FolderList, function (i, folder) {
       if (folder.ParentFolderID == parentid) {
          var children = $('<ul>');
          var item = $("<li>").html('<span>' + folder.FolderName 
                    + '</span><a href="Docs.html">
                    <div class="view-docs pull-right">View</div></a></li>');
        children.append(item);
        checkChild(folder.FolderID, item);
        parent.append(children);
    }
    else 
        return;
  });
}

函数populateFolder（）{
var list=$（“
”）.attr（{class:“collapsablelist”，id:“folder”}）；
$.each（data.FolderList，函数（i，文件夹）{
if（folder.ParentFolderID==-1）{
var item=$（“
”）.html（“”+folder.FolderName+
'');
checkChild（folder.FolderID，item）；
列表。追加（项目）；
});
$（'#anydiv'）。追加（列表）；
}
函数checkChild（parentid，parent）{
$.each（data.FolderList，函数（i，文件夹）{
if（folder.ParentFolderID==parentid）{
var children=$（“
”）；
var item=$（“
”）.html（“”+folder.FolderName
+“
”）；
附加（项目）；
checkChild（folder.FolderID，item）；
父。附加（子）；
}
其他的
返回；
});
}
如果你尝试了递归函数，也许你应该展示它？这样这里的人就可以展示你的错误，而不是从头开始为你编写代码。@FAngel，我已经编辑并发布了我尝试过的内容。由于我是开发领域的新手，我不能再多做了。不过我也在尝试自己。谢谢我非常感谢你的帮助因为你，我在看了更多关于DOM操作的内容后才了解它。我解决了我的问题。非常感谢