Javascript: Calling functions within functions and overwriting variables

Question

I have an array in JavaScript that can go as deep as I want:

 var steps = [
    { "step_id" : "1", "step_name" : "Step 1", "children" : 
        [ 
            { "step_id" : "4", "step_name" : "Step 4", "children" : 
                [ 
                    { "step_id" : "6", "step_name" : "Step 6" }
                ] 
             },
            { "step_id" : "5", "step_name" : "Step 5" } 
        ] 
    }, 
    { "step_id" : "2", "step_name" : "Step 2" }, 
    { "step_id" : "3", "step_name" : "Step 3" }
];

I then want to show each of the steps in a select drop down box. For every child step, I want to indent it. Here's my JS

 function stepsChildren(children, count) {
    var new_count = count + 1;
    var selection_values_children = '';
    for(j=0;j<children.length;j++) {
        selection_values_children += '<option value="' + children[j].step_id + '">';
        for(x=1;x<=count;x++) {
            selection_values_children +='&nbsp;&nbsp;&nbsp;';
        }
        selection_values_children += children[j].step_name + '</option>';
        if (typeof(children[j].children) != 'undefined')
            selection_values_children += stepsChildren(children[j].children, new_count);
    }
    return selection_values_children;
}

var selection_values = '';
for(i=0;i<steps.length;i++) {
    selection_values += '<option value="' + steps[i].step_id + '">' + steps[i].step_name + '</option>';
    if (typeof(steps[i].children) != 'undefined')
        selection_values += stepsChildren(steps[i].children, 1);
}

document.write('<select>' + selection_values + '</select>');

This is almost working however in the stepsChildren() function the j variable gets overwritten every time I call it. It's almost like it's setting j as a global variable.

Am I making sense?

If not I've put together a sample for you to look at: http://jsfiddle.net/CJbnm/

If you run the code and look at the select box on the right, notice how Step 5 from the array is missing?

This is because there is only one child of Step 4 which updates the j variable to 1 instead of 2 for the parent function and doesn't show any more results...

Adam Jones · Accepted Answer · 2011-08-26 01:18:36Z

7

If you don't create a variable using the var keyword it will be global, and you will get the behavior as you described. In javascript I always use a for loop like for(var i=0;i<10;i++) because when using loops I almost never intend for the loop variable to be global. I believe that is your problem here.

answered Aug 26, 2011 at 1:18

Adam Jones

7213 silver badges9 bronze badges

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

1 Comment

nnnnnn Over a year ago

I (usually) declare my loop indexes the same way, but remember that JavaScript doesn't have block scope so (in your example) i will be accessible to the rest of the function containing the for loop and not just within the loop.

Collectives™ on Stack Overflow

Javascript: Calling functions within functions and overwriting variables

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related