JSON to Unordered List

Takes a generic JSON object and displays as a HTML unordered list

by honkskillet

HTML

JSON TO UNORDERED LIST
<ul id="JSONunorderedList">

</ul> 

NOTE: adding elements to the DOM one at a time is bad form :)

CSS

body{
  background-color:#BBB;
}

ul{
    list-style-type:none;
    color:navy;
    padding-left: 5px;
}

li{
    color:darkgreen;
}
.arrayOrObject{
    color:blue;
    list-style-type:none;
}

JavaScript

var jsonObj ={"labels":[ {"labelFont":"35pt Calibri","labelLocation":{"x":0.1483, "y":0.75},  "labelText":"fluffer"},{"labelFont":"35pt Calibri","labelLocation":{"x":0.666, "y":0.666},  "labelText":"nutter"}]}; //some json to display

var listEl =document.getElementById('JSONunorderedList');
makeList(jsonObj,listEl);

function makeList( jsonObject, listElement){
    for(var i in jsonObject){//iterate through the array or object
        //insert the next child into the list as a <li>
        var newLI = document.createElement('li');
        if  (jsonObject[i] instanceof Array){
            newLI.innerHTML=i+": ARRAY";
            newLI.className="arrayOrObject"; //add a class tag so we can style differently
        }
        else if (  jsonObject[i] instanceof Object){
            newLI.innerHTML=i+": OBJECT";
            newLI.className="arrayOrObject"; //add a class tag so we can style differently
        }
        else
            newLI.innerHTML=i+': '+jsonObject[i];
        listElement.appendChild(newLI);   
        //insert a <ul> for nested nodes 
        if  (jsonObject[i] instanceof Array || jsonObject[i] instanceof Object){
            var newUL = document.createElement('ul');
            //newUL.innerHTML=i;
            listElement.appendChild(newUL);
            makeList(jsonObject[i],newUL);
        }
    }
}
console.log(jsonObj);