Javascript recursive function not working

Question

I am trying to write a code to read a nested JSON and print the items. Later I plan to generate a menu from this.

The JSON content is as follows:

{
    "label": "Root of Menu",
    "child": [  
            {
            "label": "Menu 1",
            "child": [
                    {
                    "label": "Menu 1.1",
                    "child": [
                            {
                                "label": "Menu 1.1.1"
                            },
                            {
                                "label": "Menu 1.1.2"
                            }
                    ]
                },
                {
                    "label": "Menu 1.2",
                    "child": [
                            {
                                "label": "Menu 1.2.1"
                            },
                            {
                                "label": "Menu 1.2.2"
                            }
                    ]
                },
                {
                    "label": "Menu 1.3",
                    "child": [
                            {
                                "label": "Menu 1.3.1"
                            },
                            {
                                "label": "Menu 1.3.2"
                            }
                    ]   
                }
            ]
        },
        {
            "label": "Menu 2",
            "child": [
                    {
                        "label": "Menu 2.1"
                    },
                    {
                        "label": "Menu 2.2"
                    }
            ]
        },
        {
            "label": "Menu 3",
            "child": 
                    {   
                        "label": "Menu 3.1"
                    }
        }
    ]   
}

I am using the following recursive function:

function menuize(m) { 
    if (m instanceof Array) {
        for(i = 0; i < m.length; i++) {
            for(p in m[i]) {
                menuize(m[i][p]);
            }
        }           
    } else if (m instanceof Object) {
        for(p in m) {
                menuize (m[p]);                 
        }

    } else {
        console.log('Label: ' + m);
    }

}

The menuize(m) call starts with m being the JSON object evaluated using JSON.parse(XHR.responseText) where XHR is the XMLHttpRequest object used to retrieve the data. I've seen that the data is read completely fine so that is not the problem.

Now, what happens is that the function works somewhat correct, in terms that it works fine till it reaches the innermost child but after that, it does not get back to properly printing the rest of the items one level up and so on.

The output generated will help you to understand what is happening:

t: Root of Menu 
t: Menu 1
t: Menu 1.1
t: Menu 1.1.1
t: Menu 1.1.2 

I can't understand what exactly is happening and why shouldn't the items like Menu 1.2 , Menu 2 (which are relatively in the upper levels) be printed.

Would someone please be kind to provide some insight and help me understand? Thanks!

Answer 1

Your iteration variables need to be declared with var so they'll be local variables. Otherwise, when you recurse, you're overwriting the variables used in the caller.

function menuize(m) { 
    var i, p;
    if (m instanceof Array) {
        for(i = 0; i < m.length; i++) {
            for(p in m[i]) {
                menuize(m[i][p]);
            }
        }           
    } else if (m instanceof Object) {
        for(p in m) {
                menuize (m[p]);                 
        }

    } else {
        console.log('Label: ' + m);
    }

}