JSFiddle - React, Tailwind, and code Playground

by Ea Bangalore

JavaScript

const json = [{
  "categories": [
  	{
      "_id": "1",
      "pid": "0",
      "name": "general-categories"
    }, {
      "priority": 3,
      "name_lower": "tragedy",
      "_id": "2",
      "pid": "1",
      "name": "Tragedy"
    }, {
      "priority": 3,
      "name_lower": "natural",
      "_id": "3",
      "pid": "1",
      "name": "natural"
    }, {
      "priority": 3,
      "name_lower": "humans",
      "_id": "4",
      "pid": "2",
      "name": "humans"
    }, {
      "priority": 3,
      "name_lower": "earthquake",
      "_id": "5",
      "pid": "2",
      "name": "earthquake"
    }, {
      "priority": 3,
      "name_lower": "floods",
      "_id": "6",
      "pid": "3",
      "name": "floods"
    }, {
      "priority": 3,
      "name_lower": "drought",
      "_id": "7",
      "pid": "3",
      "name": "drought"
    }, {
      "priority": 3,
      "name_lower": "landslides",
      "_id": "8",
      "pid": "6",
      "name": "landslides"
    }, {
      "priority": 3,
      "name_lower": "tsunami",
      "_id": "9",
      "pid": "6",
      "name": "tsunami"
    }]
}];

function setNodes(obj,data){
   obj.nodes = data.filter(x => x.pid === obj._id);
}

function populateLevel(arr,data){
    arr.forEach(function(x){
         console.log(x);        
         setNodes(x,data);
       if(x.nodes.length){
           populateLevel(x.nodes,data);
        }
    });
}

var data = json[0].categories;

var startingLevel = data.filter(x => x.pid === '0');

console.log(startingLevel);

populateLevel(startingLevel,data);

console.log('calculated one',JSON.stringify(startingLevel));