recursive looping a object tree

Question

I have tree object:

const tree = [
    {
        key: "parent1", 
        id: "001", 
        children:[{ key: "B", id: "002", children: [{key: "C", id: "003", children: [{key: "D", id: "004", children: [] }]}], }] 
    },
    {
        key: "parent2", 
        id: "002", 
        children:[{ key: "B", id: "002", children: [{key: "C", id: "003", children: [{key: "D", id: "004", children: [] }]}], }] 
    },
]

I want to loop through the tree but I only getting 2 levels down:

tree.map((parentNode) => {
    console.log(`parentNode: ${parentNode.key}`);
    const childrenNode = parentNode.children;
    childrenNode.map((childNode) => {
         console.log(`childNode: ${childNode.key}`);
    });
});

How do I go through every child and its children? Do I use recursive looping?

Yes and I dont always know how many levels it have, sometimes it have 2 and sometimes it have 5 — user592638
– user592638, Commented Jun 15, 2018 at 12:55

Nina Scholz · Accepted Answer · 2018-06-15 16:44:28Z

3

You could use a function which takes the actual level and returns the callback for the array method.

Inside, the callback displays the key and call the function again with an increased level for next iteration.

function iter(level) {
    return function (node)  {
        console.log('node', level, node.key);
        (node.children || []).forEach(iter(level + 1));
    };
}

var tree = [{ key: "parent1", id: "001", children: [{ key: "B", id: "002", children: [{ key: "C", id: "003", children: [{ key: "D", id: "004", children: [] }] }] }] }, { key: "parent2", id: "002", children: [{ key: "B", id: "002", children: [{ key: "C", id: "003", children: [{ key: "D", id: "004", children: [] }] }] }] }];

tree.forEach(iter(0));

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Jun 15, 2018 at 16:44

answered Jun 15, 2018 at 12:57

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Comments

Niladri Basu · Accepted Answer · 2018-06-15 13:09:56Z

You can iterate over the array recursively like this:

const tree = [
        {
            key: "parent1", 
            id: "001", 
            children:[{ key: "B", id: "002", children: [{key: "C", id: "003", children: [{key: "D", id: "004", children: [] }]}] }] 
        },
        {
            key: "parent2", 
            id: "002", 
            children:[{ key: "B", id: "002", children: [{key: "C", id: "003", children: [{key: "D", id: "004", children: [] }]}] }] 
        }
    ]

function iterator(tree) {
  tree.forEach((parentNode) => {
    console.log(`Node: ${parentNode.key}`);
    if (parentNode.hasOwnProperty('children')) iterator(parentNode.children)       
  });
}

iterator(tree)

hsz · Accepted Answer · 2018-06-15 12:56:43Z

0

What about:

const process = (level = 0) => (parentNode) => {
  console.log(`${level} parentNode: ${parentNode.key}`);
  if (parentNode.children && level < 2) {
    parentNode.children.forEach(process(level + 1));
  }
}

tree.forEach(process());

answered Jun 15, 2018 at 12:56

hsz

153k63 gold badges268 silver badges320 bronze badges

Comments

libik · Accepted Answer · 2018-06-15 12:57:45Z

Yes, you can trace it easily with recursive function.

For example like this:

const tree = [
    {
        key: "parent1", 
        id: "001", 
        children:[{ key: "B", id: "002", children: [{key: "C", id: "003", children: [{key: "D", id: "004", children: [] }]}], }] 
    },
    {
        key: "parent2", 
        id: "002", 
        children:[{ key: "B", id: "002", children: [{key: "C", id: "003", children: [{key: "D", id: "004", children: [] }]}], }] 
    },
]

function goThrough(node, parent = null) {
  if (!node) {
    return;
  }
  node.map((parentNode) => {
    console.log(`node: ${parentNode.key}, parent: ${parent}`);
    goThrough(parentNode.children, parentNode.key);    
  });
}

goThrough(tree);

Rahul Bisht · Accepted Answer · 2018-06-15 13:02:27Z

0

function printKey(obj){
    obj.map(x=>{
    console.log(x.key);
    if (x.hasOwnProperty('children')){
    printChild(x.children);
    }
  });
}

answered Jun 15, 2018 at 13:02

Rahul Bisht

1446 bronze badges

3 Comments

Ethan Over a year ago

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.

Narendra Jadhav Over a year ago

While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

Rahul Bisht Over a year ago

i will keep it in mind while answering in future. i am new to this platform & do not have much experience but i am sure this advice will help me write better answers in future. Thank you guys for advice.

Collectives™ on Stack Overflow

recursive looping a object tree

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related