高分求教：如何根据给定关系生成相应节点

Question

有个配置文件
config = {
    subConfig : [{
        name  : '1',
        subConfig : [{
            name  : '4'
        }, {
            name  : '5'
        }]
    }, {
        name  : '2',
        subCondif : [{
            name  : '6',
            subConfig : [{
                name  : '7'
            }]
        }]
    }, {
        name  : '3'
    }]
}
可以生成类似于如下HTML结构：<div id='1'>
    <div id='4'></div>
    <div id='5'></div>
</div>
<div id='2'>
    <div id='6'>
        <div id='7'>
        </div>
    </div>
</div>
<div id='3'>
</div>因为理论上subConfig可以是无限个的，所以说应该用迭代实现，求各位这问题应该如何解决？

Answer 1

config = {
    subConfig : [{
        name  : '1',
        subConfig : [{
            name  : '4'
        }, {
            name  : '5'
        }]
    }, {
        name  : '2',
        subConfig : [{
            name  : '6',
            subConfig : [{
                name  : '7'
            }]
        }]
    }, {
        name  : '3'
    }]
};
function iterator(o,element){

for(var i=0,len=o.subConfig.length;i<len;i++){
var div=document.createElement('div');
div.id=o.subConfig[i].name;
div.innerHTML=i+1;
element.appendChild(div);
if(o.subConfig[i].subConfig){
//arguments.callee(o.subConfig,div);

}

}

}
iterator(config,document.body);
代码还有问题，但大概的思路应该就这样吧。。

Answer 2

config = {
    subConfig : [{
        name  : '1',
        subConfig : [{
            name  : '4'
        }, {
            name  : '5'
        }]
    }, {
        name  : '2',
        subConfig : [{
            name  : '6',
            subConfig : [{
                name  : '7'
            }]
        }]
    }, {
        name  : '3'
    }]
};
function iterator(o,element){

for(var i=0,len=o.subConfig.length;i<len;i++){
var div=document.createElement('div');
div.id=o.subConfig[i].name;
div.innerHTML=i+1;
element.appendChild(div);
if(o.subConfig[i].subConfig){
//arguments.callee(o.subConfig,div);

}

}

}
iterator(config,document.body);
代码还有问题，但大概的思路已经出来了吧