从 JSON 数据创建 HTML 项目符号列表时出现问题

Problems creating an HTML bulleted list from JSON data

本文关键字:列表 问题 符号 项目 JSON 数据 创建 HTML      更新时间:2023-09-26

我有一些JSON,我想把它变成项目符号列表。在每个级别都有一个名称字段和一个子字段(除了最低级别)。我尝试使用递归来做到这一点,但我遇到了一个问题。除最后一个级别外,仅显示第一个子级别。我有一种感觉,我的一些递归调用可能无法正确返回。这是我到目前为止的代码:

function load_menu(){
    json_text=ajax_get("example.json");
    json_tree=JSON.parse(json_text);
    write_menu(json_tree.children,document.getElementById("level1"));
}
function write_menu(json,element){
    for(i=0;i<json.length;i++){
        var listitem=document.createElement("li");
        element.appendChild(listitem);
        var listitemtext=document.createElement("span");
        listitem.appendChild(listitemtext);
        listitemtext.innerText=json[i].name;
        if(json[i].children){
            listitemtext.setAttribute("onclick","toggle(this);");
            var sublist=document.createElement("ul");
            listitem.appendChild(sublist);
            write_menu(json[i].children,sublist);
        };
    };
}

我最终得到了一棵看起来像这样的树:

Level 1,1
    Level 2,1
        Level 3,1
        Level 3,2

它应该看起来像这样:

Level 1,1
    Level 2,1
        Level 3,1
        Level 3,2
    Level 2,2
Level 1,2
    Level 2,3

我已经检查了我的 JSON,它似乎没问题,所以我想某处的递归一定有问题。谁能在这里帮我?

如果你

for (i... 如果不存在,JS解释器将创建一个新变量i,或者如果存在,则重用现有的变量。这就是问题所在,因为在每个递归级别都需要新的循环变量。

因此,解决方案是通过编写for (var i...来强制在每个级别上创建一个变量。