recursive looping a object tree

问题:

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?

回答1:

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; }

回答2:

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());

回答3:

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);

回答4:

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

回答5:

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)