JSFiddle - React, Tailwind, and code Playground

by Ea Bangalore

JavaScript

//var originalData = {};


originalData = [

    {
		  "id": 1,
		  "parent": 0,
		  "name": "Parent"
		}, 
    {
		  "id": 2,
		  "parent": 1,
		  "name": "Child 1"
		}, {
		  "id": 3,
		  "parent": 2,
		  "name": "Grand Child 1"
		}, {
		  "id": 4,
		  "parent": 2,
		  "name": "Grand Child 2"
		}, {
		  "id": 5,
		  "parent": 1,
		  "name": "Child 2"
		} ,


		{
		  "id": 11,
		  "parent": 0,
		  "name": "Parent"
		}, {
		  "id": 22,
		  "parent": 11,
		  "name": "Child 22 22"
		}, {
		  "id": 33,
		  "parent": 22,
		  "name": "Grand Child 22 33"
		}, {
		  "id": 44,
		  "parent": 22,
		  "name": "Grand Child 22 44"
		}, {
		  "id": 55,
		  "parent": 11,
		  "name": "Child 22 55"
		}  

];

var treeData = originalData;//transformNesting("0", originalData.childNodes);
var result = applyData(treeData, originalData);

function transformNesting(root, nestedData){
    var tree = {
        id: root,
        nodes: nestedData[root] ? nestedData[root].map(function(newRoot){ return transformNesting(newRoot, nestedData)}) : []
    };
    return tree;
}

function getNodeById(list, id){
    return list.filter(function(item){
       return item.id === id;
    })[0];
}

function applyData(tree, config){
    tree.title = getNodeById(config, tree.id).name;
    tree.nodes =  tree.nodes.map(function(node){return applyData(node, config)});
    return tree;
}