JSFiddle - React, Tailwind, and code Playground

by Thomas Upton

HTML

<div>Bottom Left
  <button id="root" onclick="buildNestedList()">XXX</button>
  <pre id="container"></pre>
</div>

JavaScript

var treeNodes = [
    {
        "name": "container-1",
        "type": "container",
        "description": "container description"
    },
    {
        "name": "category-1",
        "type": "category",
        "parent": "container-1"
    },
    {
        "name": "grid-1",
        "type": "grid",
        "parent": "category-1"
    },
    {
        "name": "chart-1",
        "type": "chart",
        "parent": "category-1"
    },
    {
        "name": "container-2",
        "type": "container"
    },
    {
        "name": "category-2",
        "type": "category",
        "parent": "container-2"
    },
    {
        "name": "category-3",
        "type": "category",
        "parent": "container-2"
    },
    {
        "name": "grid-2",
        "type": "grid",
        "parent": "category-2"
    },
    {
        "name": "chart-2",
        "type": "chart",
        "parent": "category-2"
    },
    {
        "name": "grid-3",
        "type": "grid",
        "parent": "category-3"
    }
];


function buildNestedList() {
    var idToNodeMap = {};
    var maps = {};
    var root = null;
    var j=0;
    for (var i = 0; i < treeNodes.length; i++) {
        var item = treeNodes[i];
        item.children = [];
        idToNodeMap[item.name] = item;

        if (typeof item.parent === "undefined") {
            root = item;
            maps[++j]=item
        } else {
            parentNode = idToNodeMap[item.parent];
            parentNode.children.push(item);
        }
    }

    document.getElementById("container").innerHTML = JSON.stringify(maps, null, 2);
    console.log(maps);
}