javascript: Iterating a nested array and finding the level of chidlren

by marbx

HTML

Enter id of children or parent to find level: <input type="text" value="1" id="a"/>
<br/>
<input type="button" id="b" value="get level"/>

JavaScript

var data = [
    {
    "id": "1",
    "parent_id": "1",
    "children": [{
        "id": "2",
        "parent_id": "1",
        "children": [{
            "id": "3",
            "parent_id": "2"
        }, {
            "id": "4",
            "parent_id": "2"
        }]
    }, {
        "id": "5",
        "parent_id": "1",
        "children": [{
            "id": "6",
            "parent_id": "5"
        }, {
            "id": "7",
            "parent_id": "5"
        }]
    }]
}
,
{
    "id": "8",
    "parent_id": "8"
}
];

function findLevel(arr,level) {
    
  return arr.reduce(function (levelled, toLevel) {
       levelled = levelled.concat({"id":toLevel.id,"level":level});
        if(toLevel.children)
        {
            return levelled.concat(findLevel(toLevel.children,(level+1)));
        }

      return levelled;
  }, []);
}
var levelledData = findLevel(data,1);
console.log(levelledData);
document.getElementById('b').onclick  = function() {
    var elementId = document.getElementById('a').value;
    var level = levelledData.filter(x => x.id === elementId).map(x => x.level);
    var message = level.length?"Level of element by id: "+elementId+' is '+level:"Element by id "+elementId+' not found';
    alert(message);
    console.log(message);
};