JSFiddle - React, Tailwind, and code Playground

by thebigsky

HTML

<div id=1></div>

JavaScript

document.getElementById("1").innerHTML = JSON.stringify(convertToHierarchy());

function convertToHierarchy() {
        var arry = [{ "Id": "1", "Name": "abc", "Parent": "", "attr": "ass" },
               { "Id": "2", "Name": "abc", "Parent": "1", "attr": "ass" },
               { "Id": "3", "Name": "abc", "Parent": "2", "attr": "ass" },
               { "Id": "4", "Name": "abc", "Parent": "2", "attr": "ass" }];

        var nodeObjects = createStructure(arry);
        for (var i = nodeObjects.length - 1; i >= 0; i--) {
            var currentNode = nodeObjects[i];
            if (currentNode.value.Parent === "") {
                continue;
            }
            var parent = getParent(currentNode, nodeObjects);

            if (parent === null) {
                continue;
            }

            parent.children.push(currentNode);
            nodeObjects.splice(i, 1);
        }
        console.dir(nodeObjects);
        return nodeObjects;
    }
    function createStructure(nodes) {
        var objects = [];

        for (var i = 0; i < nodes.length; i++) {
            objects.push({ value: nodes[i], children: [] });
        }

        return objects;

    }
    function getParent(child, nodes) {
        var parent = null;

        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].value.Id === child.value.Parent) {
                return nodes[i];
            }
        }

        return parent;
    }