JSON to HTML bullet points

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>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.