I needed to convert a JSON hierarchy to an HTML bullet hierarchy and all the solutions I found on the Web were overkill. Enjoy.
<!DOCTYPE html>
<head>
<script>
var g_tree = {
"1":{
"11":{
"111":{
"option1":1,
"option2":1,
"option3":1
},
"112":{
"option1":1,
"option2":1,
"option3":1
},
"113":{
"option1":1,
"option2":1,
"option3":1
}
},
"12":{
"121":{
"option1":1,
"option2":1,
"option3":1
},
"122":{
"option1":1,
"option2":1,
"option3":1
},
"123":{
"option1":1,
"option2":1,
"option3":1
}
},
"13":{
"131":{
"option1":1,
"option2":1,
"option3":1
},
"132":{
"option1":1,
"option2":1,
"option3":1
},
"133":{
"option1":1,
"option2":1,
"option3":1
}
}
},
"0":{
"21":{
"211":{
"option1":1,
"option2":1,
"option3":1
},
"212":{
"option1":1,
"option2":1,
"option3":1
},
"213":{
"option1":1,
"option2":1,
"option3":1
}
},
"20":{
"221":{
"option1":1,
"option2":1,
"option3":1
},
"222":{
"option1":1,
"option2":1,
"option3":1
},
"223":{
"option1":1,
"option2":1,
"option3":1
}
},
"23":{
"231":{
"option1":1,
"option2":1,
"option3":1
},
"232":{
"option1":1,
"option2":1,
"option3":1
},
"233":{
"option1":1,
"option2":1,
"option3":1
}
}
}
};
function json2ul(json, str)
{
if (typeof(json)!='object')
return '';
str += '<ul>';
var names = [];
for (key in json)
names.push(key);
names.sort();
var len = names.length;
for (var i=0; i<len; i++) {
var key = names[i];
str += "<li>"+key;
str += json2ul(json[key], '');
str += "</li>";
}
str += '</ul>';
return str;
}
function init()
{
document.body.innerHTML=json2ul(g_tree, '');
}
</script>
</head>
<body onLoad='init()'>
</body>
</html>