我正在尝试使用javascript中的递归函数创建一个html列表,但我真的不明白为什么实际结果与我期望的结果不符。
的Json
{
"sections": {
"1": {
"name": "Section 1",
"sections": {
"3": {
"name": "Section 1.1",
"sections": {
"4": {
"name": "Section 1.1.1",
"sections": {}
}
}
}
}
},
"2": {
"name": "Section 2",
"sections": {}
}
}
}
的Javascript
$(document).ready(function() {
generateHtml(myLoadedJson);
});
function generateHtml(pData) {
var self = this;
var html = '';
if("sections" in pData) {
html+= '<ul>';
var objList = Object.keys(pData.sections);
var nbr = objList.length;
for(i=0; i<nbr; i++) {
var key = objList[i];
var obj = pData.sections[key];
html+= '<li><div>' + obj.name + '</div>'
html+= generateHtml(pData.sections[key]);
html+= '</li>';
}
html+= '</ul>';
}
return html;
};
预期结果
<ul>
<li>
<div>Section 1</div>
<ul>
<li>
<div>Section 1.1<div>
<ul>
<li>
<div>Section 1.1.1<div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div>Section 2</div>
</li>
</ul>
实际结果
<ul>
<li>
<div>Section 1</div>
<ul>
<li>
<div>Section 1.1</div>
<ul>
<li>
<div>section 1.1.1</div>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
有人有想法吗?
答案 0 :(得分:4)
我认为问题只在你的for循环中:
for(i = 0; i < nbr; i++)
应该是:
for(var i=0; i<nbr; i++)
基本上,generateHtml(...)
函数的所有调用都共享相同的循环变量(i
)。因此,当子调用递增i
时,调用循环i
也会递增。通过添加var
,您可以确保每个调用都有自己的局部变量。
答案 1 :(得分:0)
您唯一犯的错误是在循环中使用全局变量“ i”。
for(i = 0; i < nbr; i++)
相反,您应该将语句写为:
for(var i = 0; i < nbr; i++)
确保在循环中使用局部变量。
您可以使用以下link
查看工作示例