Get the child with biggest depth of a parent

Question

Say I have this tree structure:

-root
|
|
|-child1
 |
 |-innerChild1
 |
 |-innerChild2
|
|-child2

I would like to make a JS function that takes an element of the tree, and see from its perspective how deep does it go. For instance:

    var depth = getInnerDepth(root);
    depth = 3;

Depth equals 3, because root as parent at depth 1, has first degree children at depth2, and one of them (child1) has children at depth 3.

    var depth = getInnerDepth(child1);
    depth = 2;

Depth equals 2, because child1 is considered the parent in this case, so its depth is 1. Child1 has children, so the result is 2.

   var depth = getInnerDepth(innerChild1);
   depth = 1;

Depth equals 1, because from the prespective of innerChild1, it does not have any children, so it has a depth of 1.

I imagine this should be implemented recursively, but i have trouble thinking of a good way to do it.

 function getInnerDepth(parent){ 
   var depth = 1; 
   if (parent.hasChildren) {
    depth++;
    parent.children.forEach(function(child){ getInnerDepth(child); }) 
   }
   return depth;
  }

Something along the lines of this. (I know that this is not working :-) ).

I think this could help you get started: http://stackoverflow.com/questions/3787924/select-deepest-child-in-jquery — Jonas Grumann, Dec 06 '16 at 14:20
No, it is related to javascript objects. I have an array of groups, that may or may not have subgroups. — Konstantin Hadzhiev, Dec 06 '16 at 14:30
Here's an example using `.reduce()`...`function getDepth(root, depth) { return root.children.reduce((d, ch) => Math.max(d, getDepth(ch, depth+1||1)), depth||0) }` — , Dec 06 '16 at 14:34

score 4 · Accepted Answer · edited Dec 06 '16 at 14:30

I believe this would work as required, assuming that the .children property is an array, based on the OP's usage of .forEach in their attempt:

function getInnerDepth(node) {
    if (node.hasChildren) {
        var depths = node.children.map(getInnerDepth);
        return 1 + Math.max.apply(Math, depths);
    } else {
        return 1;
    }
}

Example using the DOM just for illustration (small tweaks required, because children in the DOM isn't really an array):

function getInnerDepth(node) {
  if (node.children.length) {
    var depths = Array.prototype.map.call(node.children, getInnerDepth);
    return 1 + Math.max.apply(Math, depths);
  } else {
    return 1;
  }
}

document.body.addEventListener("click", function(e) {
  console.log("Depth: ", getInnerDepth(e.target));
}, false);

div:not(.as-console-wrapper) {
  padding-left: 2em;
  border: 1px solid black;
}

<div>
  Root
  <div>
    Child 1
    <div>
      Sub-child 1-1
    </div>
    <div>
      Sub-child 1-2
      <div>
        Sub-child 1-2-1
      </div>
    </div>
  </div>
  <div>
    Child 2
  </div>
</div>

I should have been more specific, this is not DOM related. I have an array of groups that may or may not have subgroups. I need to be able to see how the depth of each group. I will now try out your suggestions. — Konstantin Hadzhiev, Dec 06 '16 at 14:31
@KonstantinHadzhiev the algorithm is the same either way - the only thing that varies is how you decide if the node has children, and what they're called — Alnitak, Dec 06 '16 at 14:32
@T.J.Crowder nice job on the DOM version - I was adding (a non-runnable) one myself at the same time :) — Alnitak, Dec 06 '16 at 14:32

score 1 · Answer 2 · answered Dec 06 '16 at 14:33

Since the OP was not clear about usage before I made this answer, so here's a DOM version.

function getInnerDepth(parent){ 
   var depth = 1; 
   if (parent.children.length) {
     var childDepth = 0;
     for(var i=0; i<parent.children.length; i++){
       childDepth = Math.max(getInnerDepth(parent.children[i]), childDepth);
     };
     depth += childDepth;
   }
   return depth;
}

console.log(getInnerDepth(document.getElementById('root')));

<div id="root">
  <span></span>
  <ul>
    <li></li>  
  </ul>
</div>

Get the child with biggest depth of a parent

2 Answers2