JSFiddle - React, Tailwind, and code Playground

by Arvind Pal

JavaScript

let flatArr = [
    {
        "id": 1,
        "parent": null
    },
    {
        "id": 2,
        "parent": 1
    },
    {
        "id": 3,
        "parent": 1
    },
    {
        "id": 4,
        "parent": 1
    },
    {
        "id": 5,
        "parent": 1
    },
    {
        "id": 6,
        "parent": 1
    },
    {
        "id": 7,
        "parent": 6
    },
    {
        "id": 8,
        "parent": 6
    },
    {
        "id": 9,
        "parent": 1
    },
    {
        "id": 10,
        "parent": 9
    },
    {
        "id": 11,
        "parent": 9
    },
    {
        "id": 12,
        "parent": 11
    },
    {
        "id": 13,
        "parent": 12
    },
    {
        "id": 14,
        "parent": 13
    },
    {
        "id": 15,
        "parent": 14
    },
    {
        "id": 16,
        "parent": 12
    },
    {
        "id": 17,
        "parent": 12
    },
    {
        "id": 18,
        "parent": 1
    },
    {
        "id": 19,
        "parent": 1
    }
];

let map = {};
for(let i=0;i<flatArr.length; i++){
map[flatArr[i].id] = [ ]
}
console.log(map);
function getChildOfChild (id, childOfchild){

	let child = flatArr.filter(s=>s.parent ===parseInt(id))
  child =child.map(c=>c.id)
  for(let i=0; i<child.length; i++){
  childOfchild.push(child[i])
  getChildOfChild(child[i], childOfchild)
  } 
}

for (let i in map) {
if(i!=1){
	let childOfchild =[parseInt(i)];
  
  getChildOfChild(i, childOfchild);
  
  map[ i ] = childOfchild;
  }
}

console.log(map);