Problems creating an HTML bulleted list from JSON data

Question

I am have some JSON that I want to turn in to a bulleted list. At each level there is a name field and a children field (apart from at the lowest level). I have tried using recursion to do it but I have run in to a problem. Only the first child is displayed at all but the last level. I have a feeling that some of my recursive calls might not be returning properly. Here is the code I have so far:

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

I end up with a tree that looks like this:

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

It should look like this:

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

I have checked through my JSON and it seems to be ok so I guess there must be a problem with the recursion somewhere. Can anyone help me out here?

What does 'json.length' return? Based on the example output, it looks like it would return instead of the 2 you are expecting. Edit: on further investigation, i set to 0 would be less than json.length always so it will only ever go once, no? — Matthew Darnell
– Matthew Darnell, Commented Apr 25, 2012 at 18:42
You could try writing for (var i... instead of for (i.... The function may reuse the same i when you recurse like this. — Mr Lister
– Mr Lister, Commented Apr 25, 2012 at 18:47
Give us your sample JSON input. Lister, i is set to 0 though, so even if it resuses i, it will be reset i = 0 — aziz punjani
– aziz punjani, Commented Apr 25, 2012 at 18:54
@Interstellar_Coder that's exactly the problem, inner recursion loops are mucking with the outer recursion's counter. — jbabey
– jbabey, Commented Apr 25, 2012 at 19:03
@Interstellar_Coder Yes, and after "Level 3,2", i is 2, even though it should still have been 0 (because you're not done with level 1 yet) — Mr Lister
– Mr Lister, Commented Apr 25, 2012 at 19:04

Mr Lister · Accepted Answer · 2012-04-25 19:57:28Z

2

If you write for (i... the JS interpreter will create a new variable i if one doesn't exist, or reuse an existing one if it does exist. That's the problem here, because you need new loop variables in every level of recursion.

So the solution is to force creation of a variable on every level, by writing for (var i... instead.

edited Apr 25, 2012 at 19:57

answered Apr 25, 2012 at 19:48

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problems creating an HTML bulleted list from JSON data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related