JSFiddle - React, Tailwind, and code Playground

by jarosciak

JavaScript

function getTree(array, level) {
    var ul = document.createElement('ul');
    level = level || 0;
    array.forEach(function (a) {
        var li = document.createElement('li');
        li.appendChild(document.createTextNode(a.id + ' level: ' + level));
        Array.isArray(a.children) && li.appendChild(getTree(a.children, level + 1));
        ul.appendChild(li);
    });
    return ul;
}

var data = [
{id: 1, parent: 1},
{id: 2, parent: 2},
],
    tree = function (data, root) {
        var r = [],
            o = {};

        data.forEach(function (a) {
            a.children = o[a.id] && o[a.id].children;
            o[a.id] = a;
            if (a.parent === root) {
                r.push(a);
            } else {
                o[a.parent] = o[a.parent] || {};
                o[a.parent].children = o[a.parent].children || [];
                o[a.parent].children.push(a);
            }
        });
        return r;
    }(data.sort(function (a, b) { return a.parent - b.parent || a.id- b.id; }), 0);

document.body.appendChild(getTree(tree));
console.log(tree);