Javascript Recursive function seems to exit after first pass

Question

I am trying to render a tree like hierarchy while recursing through set a nodes (index). I already know the roots(top). There are multiple root elements. I am trying to collect the entire html in the variable tree (this entire html will be appended to a div later)

tree = "";
top = ["1", "11", "14", "17", "72", "73", "74", "78", "79", "98", "99"];
index = {
    1: {
        'name': "Node 1",
        'children': "2,3,4,5,6,7,8,9,10"
    },
    2: {
        'name': "Node 2",
        'children': ""
    },

//.... goes all the way upto 99
}

The recursive function makeFT(index,roots) only seems to break after traversing the children of first element in the "top" array.

The code for this is at jsbin and below. What could be the problem? Is there a better way to do this? Any help is appreciated.

makeFT(index, top);


function makeFT(index, roots) {
    console.log(roots);
    tree == "" ? tree += '<ul>' : tree += '<ul><hr/>'
    for (i = 0; i < roots.length; ++i) {
        n = parseInt(roots[i]);
        //console.log(n);
        //console.log(index[n]);

        tree += '<li>' + roots[i] + '</span>' + index[n].name;

        if (index[n].children === "") {
            tree += '<input class="leaf tree-first-input" type="text" size="2">'
        }
        else {
            tree += '<input class="non-leaf tree-first-input" type="text" size="2">'
            makeFT(index, index[n].children.split(","));
        }
        tree += "</li>"
    }
    tree += '</ul><br/>'

}

UPDATE : Turns out this is a scoping problem and not a recursion problem. The recursion was alright. Since I did not define scope of the variable 'i' while looping through roots array, each subsequent recursed function inherited the value of unscoped 'i' thereby creating the problem.

rcravens · Accepted Answer · 2010-12-03 12:22:14Z

4

Add a var i=0 inside the function. You have scoping issues with i.

http://jsbin.com/ugoju4/12/edit

answered Dec 3, 2010 at 12:22

rcravens

8,3982 gold badges35 silver badges27 bronze badges

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

2 Comments

Tomas Over a year ago

Also adding var n and var tree are recommended to avoid future bugs

paddle42380 Over a year ago

@Tomas, thanks. Yes, I will add the relevant scope. Missed the 'var i' part as a result of which Each subsequent recursed function inherited the value of i. Brilliant find by rcravens.

Teja Kantamneni · Accepted Answer · 2010-12-03 12:19:50Z

0

You are not returning anything from your recursive function.

  }
        else {
            tree += '<input class="non-leaf tree-first-input" type="text" size="2">'
            tree += makeFT(index, index[n].children.split(","));
        }
        tree += "</li>"
    }
    tree += '</ul><br/>'
    return tree;
 }

This should give you the value. Use it to write it to an element by Id. Updated the jsfiddle

answered Dec 3, 2010 at 12:19

Teja Kantamneni

17.5k12 gold badges58 silver badges86 bronze badges

3 Comments

EvilMM Over a year ago

I think tree is a global defined variable, so this function must not return any value.

paddle42380 Over a year ago

This problem is occurring irrespective of whether I return a value or not. Give it a try urself.

Teja Kantamneni Over a year ago

@EvilMM You should, check the updated jsfiddle code, jsbin.com/ugoju4/11/edit

RoToRa · Accepted Answer · 2010-12-03 12:23:02Z

0

top is a global variable referring to the "top" window of the current frame set. Use a different variable name.

answered Dec 3, 2010 at 12:23

RoToRa

38.5k12 gold badges72 silver badges110 bronze badges

Comments

EvilMM · Accepted Answer · 2010-12-03 12:20:50Z

-1

Why you type "++i" in you for-statement? Use "i++"
You are typing

index[n].children === ""

try it with

index[n].children == ""

I think he never runs in the else-part.

answered Dec 3, 2010 at 12:20

EvilMM

9014 silver badges9 bronze badges

2 Comments

Tomas Over a year ago

i++ or ++i in the for statement does not differ at all.

Tomas Over a year ago

In addition, since children is a string, === is the correct operator (-1)

Collectives™ on Stack Overflow

Javascript Recursive function seems to exit after first pass

4 Answers 4

2 Comments

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related