Dumping objects to HTML

Use this class to dump javascript objects to ul-based HTML tree structure.

Required classes: Utils и Comparator.

• Watch demo
• Download

function Dump() {}

Dump.toHtml = function(obj, name, className) {
	name = name || '';
	className = className || 'collapsibleTree';
	var rootNode = document.createElement('div');
	rootNode.className = className;
	rootNode.appendChild(Dump.node(obj, name));
	return rootNode;
};

Dump.typeNames = [
	'',
	'Array',
	'Object',
	'String',
	'Number',
	'Boolean',
	'Function',
	'Date',
	'Null',
	'Undefined'
];

Dump.handleCollapserClick = function(evt) {
	evt = evt || window.event;
	var element = evt.target || evt.srcElement;
	var container = element.parentNode.parentNode;
	container.className = (container.className == 'collapsed') ? 'expanded' : 'collapsed';
	element.className = (element.className == 'collapser collapserCollapsed') ? 'collapser collapserExpanded' : 'collapser collapserCollapsed';
};

Dump.node = function(obj, name) {
	var type = Utils.getType(obj);
	var node, properties = [], property, count, childNode, i, typeContainer, nameContainer, valueContainer, collapserContainer, collapser;
	node = document.createElement('div');
	collapserContainer = document.createElement('div');
	collapserContainer.className = 'collapserContainer';
	node.appendChild(collapserContainer);
	typeContainer = document.createElement('span');
	typeContainer.className = 'typeContainer';
	typeContainer.appendChild(document.createTextNode(Dump.typeNames[type]));
	node.appendChild(typeContainer);
	nameContainer = document.createElement('span');
	nameContainer.className = 'nameContainer';
	nameContainer.appendChild(document.createTextNode(name));
	node.appendChild(nameContainer);
	switch(type) {
		case Utils.TYPE_ARRAY:
		case Utils.TYPE_OBJECT:
			for(property in obj) {
				properties.push(property);
			}
			count = properties.length;
			if (type == Utils.TYPE_ARRAY) {
				properties.sort(Comparator.numericAsc);
				nameContainer.appendChild(document.createTextNode('[' + count + ']'));
			} else {
				properties.sort();
			}
			valueContainer = document.createElement('ul');
			for (i = 0; i < count; i++) {
				property = properties[i];
				childNode = document.createElement('li');
				childNode.appendChild(Dump.node(obj[property], property));
				valueContainer.appendChild(childNode);
			}
			if(childNode != null) {
				childNode.className += ' last';
			}
			if(valueContainer.childNodes.length > 0) {
				collapser = document.createElement('div');
				collapser.className = 'collapser collapserCollapsed';
				collapserContainer.appendChild(collapser);
				collapser.onclick = Dump.handleCollapserClick;
				node.className = 'collapsed';
				node.appendChild(valueContainer);
			}
			break;
		case Utils.TYPE_BOOLEAN:
		case Utils.TYPE_NUMBER:
		case Utils.TYPE_NULL:
		case Utils.TYPE_UNDEFINED:
			valueContainer = document.createElement('span');
			valueContainer.className = 'valueContainer';
			valueContainer.appendChild(document.createTextNode(' = ' + obj));
			node.appendChild(valueContainer);
			break;
		default:
			valueContainer = document.createElement('span');
			valueContainer.className = 'valueContainer';
			valueContainer.appendChild(document.createTextNode(' = "' + obj + '"'));
			node.appendChild(valueContainer);
	}
	return node;
};