Open ghost opened 6 years ago
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';
});
};
}
In case needed - removed Jquery dependency from the generate tree function: