g00dv1n/index.html

## index.html
<html>
<body>
    <script src="./index.js"></script>
</body>
</html>

## index.js
/*
 *   Реализация тестового задания
 *   Nested Sets Component
 *   Ссылка на jsfiddle:
 *   https://jsfiddle.net/g00dv1n/b4s16La5/
*/

const createThree = (() => {
    // Проверяем не пустой ли массив
    function isValidData(items) {
        return Array.isArray(items) && items.length > 0;
    }

    // На случай если массив items не отсортирован.
    function findRootItem(items) {
        return items
            .find(item => item.left === 1);
    }
    function hasChildren(item) {
        return item.left + 1 < item.right;
    }

    // Создаем <li>{{item.title}}</li>
    function createThreeNode(item) {
        const el = document.createElement('li');
        el.innerText = item.title;
        return el;
    }

    function findChildrenItems(rootItem, items) {
        const { left, right } = rootItem;
        const children = []

        let nextLeft = left + 1;
        let lastChild;

        do {
            lastChild = items.find(i => i.left === nextLeft);
            if (!lastChild) break;

            children.push(lastChild);
            nextLeft = lastChild.right + 1;
        } while (lastChild.right + 1 < right)

        return children;
    }
    /*
        Начиная с корня, рекурсивно обходим всех потомков
    */
    function getChildNodes(currentItem, items) {
        const node = createThreeNode(currentItem);

        if (hasChildren(currentItem)) {
            const ul = document.createElement('ul');
            const children = findChildrenItems(currentItem, items);
            children.forEach(item => {
                const childNode = getChildNodes(item, items);
                ul.appendChild(childNode);
            });
            node.appendChild(ul);
        }
        return node;
    }

    /*
        Проверяем не пустой ли массив с данными.
        Создаем корневой ul.
        Добавляем к нему полученное дерево.
    */
    function createThree(items) {
        if (!isValidData(items)) {
            return null;
        }
        const rootItem = findRootItem(items);

        const tree = document.createElement('ul');

        const children = getChildNodes(rootItem, items);
        tree.appendChild(children);

        return tree;
    }
    return createThree;
})();


/*
    Т.к. в задании написано:
    "Реализовать компонент, принимающий на вход параметр items."
    &&
    "запрещено использовать любые библиотеки"

    То создаем Custom Html Element
*/

class NestedSetsTree extends HTMLElement {
    constructor(items) {
        super();
        this.renderTree(items);
    }
    renderTree(items) {
        const tree = createThree(items);
        if (tree) {
            this.appendChild(tree);
        }
    }
}

customElements.define('nested-sets-tree', NestedSetsTree);


const testData = [
    {
        title: "Одежда",
        left: 1,
        right: 22
    },
    {
        title: "Мужская",
        left: 2,
        right: 9
    },
    {
        title: "Женская",
        left: 10,
        right: 21
    },
    {
        title: "Костюмы",
        left: 3,
        right: 8
    },
    {
        title: "Платья",
        left: 11,
        right: 16
    },
    {
        title: "Юбки",
        left: 17,
        right: 18
    },
    {
        title: "Блузы",
        left: 19,
        right: 20
    },
    {
        title: "Брюки",
        left: 4,
        right: 5
    },
    {
        title: "Жакеты",
        left: 6,
        right: 7
    },
    {
        title: "Вечерние",
        left: 12,
        right: 13
    },
    {
        title: "Летние",
        left: 14,
        right: 15
    }
];

// Создаем экземпляр и добавляем на страничку
const nestedSetsTree = new NestedSetsTree(testData);
document.body.appendChild(nestedSetsTree);
	<html>
	<body>
	<script src="./index.js"></script>
	</body>
	</html>
	/*
	* Реализация тестового задания
	* Nested Sets Component
	* Ссылка на jsfiddle:
	* https://jsfiddle.net/g00dv1n/b4s16La5/
	*/

	const createThree = (() => {
	// Проверяем не пустой ли массив
	function isValidData(items) {
	return Array.isArray(items) && items.length > 0;
	}

	// На случай если массив items не отсортирован.
	function findRootItem(items) {
	return items
	.find(item => item.left === 1);
	}
	function hasChildren(item) {
	return item.left + 1 < item.right;
	}

	// Создаем <li>{{item.title}}</li>
	function createThreeNode(item) {
	const el = document.createElement('li');
	el.innerText = item.title;
	return el;
	}

	function findChildrenItems(rootItem, items) {
	const { left, right } = rootItem;
	const children = []

	let nextLeft = left + 1;
	let lastChild;

	do {
	lastChild = items.find(i => i.left === nextLeft);
	if (!lastChild) break;

	children.push(lastChild);
	nextLeft = lastChild.right + 1;
	} while (lastChild.right + 1 < right)

	return children;
	}
	/*
	Начиная с корня, рекурсивно обходим всех потомков
	*/
	function getChildNodes(currentItem, items) {
	const node = createThreeNode(currentItem);

	if (hasChildren(currentItem)) {
	const ul = document.createElement('ul');
	const children = findChildrenItems(currentItem, items);
	children.forEach(item => {
	const childNode = getChildNodes(item, items);
	ul.appendChild(childNode);
	});
	node.appendChild(ul);
	}
	return node;
	}

	/*
	Проверяем не пустой ли массив с данными.
	Создаем корневой ul.
	Добавляем к нему полученное дерево.
	*/
	function createThree(items) {
	if (!isValidData(items)) {
	return null;
	}
	const rootItem = findRootItem(items);

	const tree = document.createElement('ul');

	const children = getChildNodes(rootItem, items);
	tree.appendChild(children);

	return tree;
	}
	return createThree;
	})();


	/*
	Т.к. в задании написано:
	"Реализовать компонент, принимающий на вход параметр items."
	&&
	"запрещено использовать любые библиотеки"

	То создаем Custom Html Element
	*/

	class NestedSetsTree extends HTMLElement {
	constructor(items) {
	super();
	this.renderTree(items);
	}
	renderTree(items) {
	const tree = createThree(items);
	if (tree) {
	this.appendChild(tree);
	}
	}
	}

	customElements.define('nested-sets-tree', NestedSetsTree);


	const testData = [
	{
	title: "Одежда",
	left: 1,
	right: 22
	},
	{
	title: "Мужская",
	left: 2,
	right: 9
	},
	{
	title: "Женская",
	left: 10,
	right: 21
	},
	{
	title: "Костюмы",
	left: 3,
	right: 8
	},
	{
	title: "Платья",
	left: 11,
	right: 16
	},
	{
	title: "Юбки",
	left: 17,
	right: 18
	},
	{
	title: "Блузы",
	left: 19,
	right: 20
	},
	{
	title: "Брюки",
	left: 4,
	right: 5
	},
	{
	title: "Жакеты",
	left: 6,
	right: 7
	},
	{
	title: "Вечерние",
	left: 12,
	right: 13
	},
	{
	title: "Летние",
	left: 14,
	right: 15
	}
	];

	// Создаем экземпляр и добавляем на страничку
	const nestedSetsTree = new NestedSetsTree(testData);
	document.body.appendChild(nestedSetsTree);