对对象进行排序 <ul> 使用值将其嵌套的列表

Question

我对如何执行此排序任务感到困惑。

我有一个看起来像这样的对象数组：

{
name : "Another Second level code",
id : "aslc",
parent : "flc"
}

还有更多（有关完整代码，请参见JSFiddle ）

每个项目都有一个父代码。 我想创建一个<ul>列表，其中每个条目及其父代码以嵌套的层次结构附加到该条目。

我从这个开始

for (i = 0; i < data.length; i++) {
    if (data[i].parent === "none"){
    $("#firstLevel").append("<li id="+data[i].id +">"+data[i].id+"   </li>");
    firstLevelArray.push(data[i].id);
    }

}

它开始运行良好，创建了父项为“ none”的根条目的初始列表。

然后，我将此结构添加到同一循环中，尝试将另一个子列表附加到主代码中，该子列表具有以该主代码作为父项的条目。 这没用。 我说的是，如果在第一级的数组中找到条目的父项，则该条目应作为列表附加到父项的条目...

if (firstLevelArray.index(data[i].parent !== -1)) {
    $("'#"+data[i].parent+"'").append("<ul><li id="+data[i].id +">"+data[i].id+"</li></ul>");
    }

尽管我过去做过一些JS事情，但我从来没有真正从事过这种排序任务……有什么方法可以使我以更简单的方式实现这种排序？

JSFiddle供参考。

Answer 1

请尝试以下方法：

(function rec(rdata) {
    if(!rdata.length) return;
    //Get and Remove the first element in the array
    var d = rdata.shift();
    //If is root just appended it to the list
    if(d.parent === 'none') {
         $("#firstLevel").append("<li id="+d.id +">"+d.id+"</li>");
    //If 'sub element' and its parent is rendred just append it to its parent 
    } else if($("#"+d.parent).length > 0 ) {
        if($("#"+d.parent).find("> ul").length === 0) {
            $("#"+d.parent).append("<ul></ul>");
        }
        $("#"+d.parent+" > ul").append("<li id="+d.id +">"+d.id+"   <ul></ul></li>");
    //If is a 'sub element' and its parent not rendred yet just delay
    //the rendering by pushing back the element to data
    }else {    
        //delay
        rdata.push(d);
    }
    //Handle the next subset of data
    rec(rdata);
})(data);

演示： https : //jsfiddle.net/iRbouh/q736p99c/