Javascript - Traversing Hiarchial object of Arrays

Question

I have some JavaScript code I have inherited. It draws a hierarchical tree based on json data (using D3 version 3 library). The code works. I need to make a minor modification, but HOW to make the modification is the problem. I have an object called treeData. treeData is a hierarchical listing of nodes in the tree. Each node has properties, such as name, id, depth, x, y, and children. Children is an array, which points to child nodes of the current node. So children can have children, can have children, etc. If I look at the treeData object, I see the 'root' node, and I see that it has 10 children.

The children array is structurally the same as the parent... This shows expanding the first child, and I see that it has 3 children. My data is typically 3-4 levels deep.

My challenge is that I need to run a function against all nodes in the tree. I am sure that there is an elegant way of doing this, but I don't know what it would be... I need something like..

var myNode;
for (var zz = 0; zz <= treeData.children.length; zz++) {
myNode = treeData.children[zz];
collapseNode(myNode);
}

The problem is that this just looks at one level, not traversing the hierarchy... How do I rewrite this to visit each node in the hierarchy?

You need recursive function to do that. What do you want to get actually but? — Manish Jangir
– Manish Jangir, Commented Nov 29, 2017 at 14:01
@Manish - the end result... for each object in the hierarchy, call collapseNode(the current node) — user1009073
– user1009073, Commented Nov 29, 2017 at 14:06
@Tushar - That gave me the code that I needed.I ended up using the traverse(o) snippet. If you will submit that, I will accept it as an answer. — user1009073
– user1009073, Commented Nov 29, 2017 at 15:03

Tushar Walzade · Accepted Answer · 2017-11-30 06:47:55Z

1

Try this -

function traverse(o) {
    for (i in o) {
        // if o is an object, traverse it again
        if (!!o[i] && typeof(o[i])=="object") {
            console.log(i, o[i])
            traverse(o[i]);
        }
    }
}

edited Nov 30, 2017 at 6:47

answered Nov 30, 2017 at 6:40

Tushar Walzade

3,8274 gold badges38 silver badges60 bronze badges

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

Comments

gurvinder372 · Accepted Answer · 2017-11-29 14:05:06Z

1

Try this recursive approach

function processNode(node)
{
    collapseNode(myNode); //logic for current node
    (treeData.children || []).forEach( function( chidNode ){
       processNode( chidNode ); //if there are children invoke the same method for each child node
    });
}
processNode( treeData ); //invoke for your treeData

answered Nov 29, 2017 at 14:05

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

2 Comments

user1009073 Over a year ago

I cannot get the line ... (treeData.children || []).forEach( function( chidNode ){ ... to traverse. It appears to only call the current node and one of the child nodes....

gurvinder372 Over a year ago

@user1009073 Can you please share some sample data for treeData for me to test this?

Jonas Wilms · Accepted Answer · 2017-11-29 14:04:59Z

0

function traverse(array){
  for(const obj of array){
     //do whatever with obj, than go deeper
     traverse(obj.children);
  }
}

Thats quite simple if you go deep by recursion.

answered Nov 29, 2017 at 14:04

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Collectives™ on Stack Overflow

Javascript - Traversing Hiarchial object of Arrays

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related