rendered paste body<html><head><script type="text/javascript"> function get(elid){ return document.getElementById(elid); } var obj = { "a":"b", "c":{ "d":"e", "f":{ "g":"h", n:{ "o":"p" } } }, "i":"j" }; function alert(txt){// txt = txt.replace(/\t/," "); get("alert").innerHTML += txt+"<br />"; } var indent = ""; var loops = 0; function awritree(obj){ for(var i in obj){// if(typeof obj[i] != "object"){// alert(i+" :: "+obj[i]);// } else {// alert(i+" >> ");// writree(obj[i]);// } if(typeof obj[i] != "object"){// alert(loops.timesWrite(" ")+i+" => "+obj[i]); alert(i+" => "+obj[i]); } else {// loops++; indent += " ";// alert(indent+i+" { "); alert(i+" { ");// writree(obj[i]); test(obj[i]);// alert(" } "); } } } function test(obj){ for(var i in obj){ if(typeof obj[i] != "object"){ alert(i+" => "+obj[i]); } else { alert(i+" { "); test(obj[i]); } } alert(" } "); } function writree(obj){ var maindiv = document.body.createChild({element:"div",attrs:{"id":"tree"}}); for(var i in obj){ if(typeof obj[i] != "object"){ var treeitem = maindiv.createChild({element:"div",attrs:{"id":"treeitem"}}); treeitem.createChild({element:"text",value:i}); } else { var treeitem = maindiv.createChild({element:"div",attrs:{"id":"treeitem"}}); treeitem.createChild({element:"text",value:i}); writree(obj[i]); } } } HTMLElement.prototype.createChild = function(params){ if(params.element != "text"){ var el = document.createElement(params.element); for(var i in params.attrs){ if(params.innerText){ el.createChild({element:"text",value:params.innerText}); } else { el.setAttribute(i, params.attrs[i]); } } } else { var el = document.createTextNode(params.value); } this.appendChild(el); return el; } Number.prototype.timesWrite = function(str){ var fstr = ""; for(var i = 0;i < this;i++){ fstr += str; } return fstr; } window.onload = init; function init(){ writree(obj); } </script></head><body><div id="alert"></div></body></html>