Question

我一直在尝试从以下数据创建嵌套的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));

非常感谢！

Answer 1

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

结帐小提琴https://jsfiddle.net/rt4gL1ff/6/

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

1 个答案: