Remove jquery dependency from generate tree

[ghost]

In case needed - removed Jquery dependency from the generate tree function:

function generateTree(data) {
    if (typeof (data) == 'object' && data != null) {
        var ul = document.createElement('ul');
        for (var item in data) {
            var li = document.createElement('li');
            li.innerHTML = item;
            li.appendChild( generateTree( data[ item ]));
            ul.appendChild( li );
        }
        return ul;
    } else {
        var v = (data == undefined) ? '[empty]' : data;
        return document.createTextNode(' : ' + v);
    }
};

[alvaro-calleja]

This would be the JsonTreeBuilder in plain JS, no jQuery needed:

function JsonTreeBuilder() {

    this.build = function(jsonDoc) {
        // Build ul for the json
        var tree = generateTree(jsonDoc);
        // And make it expandable/collapsible
        activateTree(tree);

        // Wrap with container and return
        var div = document.createElement('div');
        div.id = 'jsonTree';
        div.appendChild(tree);
        return div;
    };

    var generateTree = function(data) {
        if (typeof data === 'object' && data !== null) {
            var ul = document.createElement('ul');
            for (var key in data) {
                var li = document.createElement('li');
                li.textContent = key;
                li.appendChild(generateTree(data[key]));
                ul.appendChild(li);
            }
            return ul;
        } else {
            var value = (data === undefined) ? '[empty]' : data;
            var textNode = document.createTextNode(' : ' + value);
            return textNode;
        }
    };

    var activateTree = function(tree) {
        var liElements = tree.querySelectorAll('li > ul');
        liElements.forEach(function(innerUlContent) {
            var parent = innerUlContent.parentElement;
            parent.classList.add('expandable');
            parent.addEventListener('click', function() {
                parent.classList.toggle('expanded');
                innerUlContent.style.display = (innerUlContent.style.display === 'none') ? '' : 'none';
            });

            // Prevent li clicks from propagating up to the container ul
            innerUlContent.addEventListener('click', function(event) {
                event.stopPropagation();
            });
        });

        // Start with the tree collapsed.
        var ulElements = tree.querySelectorAll('ul');
        ulElements.forEach(function(ul) {
            ul.style.display = 'none';
        });
    };
}