JavaScript：递归函数以创建嵌套的UL

RobertFrenette 发表于 Dev

罗伯特·弗雷内特

我一直在尝试根据以下数据创建嵌套的UL：

[{"unique_id" : "UFID-06", "level" : "-3"}, 
 {"unique_id" : "UFID-05", "level" : "-2"}, 
 {"unique_id" : "UFID-04", "level" : "-1"}, 
 {"unique_id" : "UFID-03", "level" : "1"}, 
 {"unique_id" : "UFID-02", "level" : "2"},
 {"unique_id" : "UFID-01", "level" : "3"}];

但是我在FireBug中收到了“太多递归”消息。

我希望有人可以在以下方面发现我要去的地方：

function process(data) {    
    var childDiv = document.createElement('div');
    for (var i in data) {
        var unique_id = data[i].unique_id;
        var level = data[i].level;

        var ul  = document.createElement('ul');
        var li  = document.createElement('li');
        var txt = document.createTextNode(unique_id + ' : ' + level);

        li.appendChild(txt);
        ul.appendChild(li);
        li.appendChild(txt);

        childDiv.appendChild(ul);
        process(data[i]);
    }
    return childDiv;
}

这是一个小提琴（https://jsfiddle.net/rt4gL1ff/2/）。请注意，以下行已被注释掉，因为执行该行将导致“递归过多”错误。

//parentDiv.appendChild(process(obj));

非常感谢！

Sasidhar Boddeti

没有停止条件 process(data[i]);

以及您无需使用递归函数即可完成任务

请尝试以下操作：

var parentDiv = document.getElementById('parentDiv');

var obj = [{"unique_id" : "UFID-06", "level" : "-3"}, 
       {"unique_id" : "UFID-05", "level" : "-2"}, 
       {"unique_id" : "UFID-04", "level" : "-1"}, 
       {"unique_id" : "UFID-03", "level" : "1"}, 
       {"unique_id" : "UFID-02", "level" : "2"},
       {"unique_id" : "UFID-01", "level" : "3"}];

function process(data) {    
    var childDiv = document.createElement('div');
    var prevParent = childDiv; //initially the parent od all ul's should be div
    for (var i in data) {
       var unique_id = data[i].unique_id;
       var level = data[i].level;

       var ul  = document.createElement('ul');
       var li  = document.createElement('li');
       var txt = document.createTextNode(unique_id + ' : ' + level);

       li.appendChild(txt);
       ul.appendChild(li);

       prevParent.appendChild(ul);
       prevParent = ul; //update the parent ul to which the next elements are added
       //process(data,level+1);
   }
   return childDiv;
}

parentDiv.appendChild(process(obj));