Dynamic Tree Creator With JavaScript – treeCreater.js

Preview:

Description:

treeCreater.js is a really simple JavaScript library to dynamically render a list based hierarchical tree structure from an array of data objects.

How to use it:

Import the JavaScript treeCreater.js and stylesheet treeCreater.css into the document.

<link rel="stylesheet" href="treeCreater.css">
<script src="treeCreater.js"></script>

Create an empty html unordered list for the generated tree.

<ul class="treeRoot"></ul>

Define your own data to be presented in the tree.

var quotaTree = [
    {
        title: 'quotaParent1',
        children: [
            {
                title: 'quotaSubParent1',
                children: []
            },
            {
                title: 'quotaSubParent2',
                children: [
                    {
                        title: 'quotaChild1'
                    },
                    {
                        title: 'quotaChild2'
                    }
                ]
            }
        ]
    },
    {
        title: 'quotaParent1',
        children: [
            {
                title: 'quotaSubParent1',
                children: [
                    {
                        title: 'quotaChild1'
                    }
                ]
            },
            {
                title: 'quotaSubParent2',
                children: [
                    {
                        title: 'quotaChild1'
                    },
                    {
                        title: 'quotaChild2'
                    }
                ]
            }
        ]
    }
]

Render the tree and done.

treeCreater(quotaTree, 'treeRoot')