JSFiddle - React, Tailwind, and code Playground

by Luis Fraguada

HTML

<script src="https://d3js.org/d3.v4.js"></script>
<div id="original"></div>
<div>---</div>
<div id="nested"></div>
<div>---</div>
<div id="rel"></div>

JavaScript

var data = [
{name: 'l1', pid: -1, Id:0},
{name: 'l2', pid: 0, Id:1},
{name: 'l3', pid: 0, Id:2},
{name: 'l4', pid: 2, Id:3},
{name: 'l5', pid: -1, Id:3}];

var nested = d3.nest()
.key(function(d) { return d.pid; })
.entries(data);

function convert(array){
    var map = {}
    for(var i = 0; i < array.length; i++){
        var obj = array[i]
        if(!(obj.Id in map)){
            map[obj.Id] = obj
            map[obj.Id].children = []
        }

        if(typeof map[obj.Id].Name == 'undefined'){
            map[obj.Id].Id = obj.Id
            map[obj.Id].name = obj.name
            map[obj.Id].pid= obj.pid
        }

        var parent = obj.pid || '-';
        if(!(parent in map)){
            map[parent] = {}
            map[parent].children = []
        }

        map[parent].children.push(map[obj.Id])
    }
    return map['-']
}


document.getElementById('original').innerText = JSON.stringify(data);
document.getElementById('nested').innerText = JSON.stringify(nested);
document.getElementById('rel').innerText = JSON.stringify(convert(data));