Generating nested UL list using JSON and Javascript

Question

My end goal is to create a HTML list. the List is defined in a JSON String. Example:-

{“cluster”: [
    {“name”:”SEIR”,”cluster”:[
            {“name”:”TR 0.25”,”cluster”:[
                    {“name”:”RR 0.30”,”member”:[“sim1”,”sim5”,”sim10”]},
                    {“name”:”RR 0.35”,”member”:[“sim3”,”sim7”,”sim15”]},
                    {“name”:”RR 0.40”,”member”:[“sim6”,”sim9”,”sim25”]}
            ]},
            {“name”:”TR 0.5”,”cluster”:[
                    {“name”:”RR 0.30”,”member”:[“sim1”,”sim5”,”sim10”]},
                    {“name”:”RR 0.35”,”member”:[“sim3”,”sim7”,”sim15”]},
                    {“name”:”RR 0.40”,”member”:[“sim6”,”sim9”,”sim25”]}
            ]}
    ]},
    {“name”:”SIR”,”cluster”:[
            {“name”:”TR 0.25”,”cluster”:[
                    {“name”:”RR 0.30”,”member”:[“sim1”,”sim5”,”sim10”]},
                    {“name”:”RR 0.35”,”member”:[“sim3”,”sim7”,”sim15”]},
                    {“name”:”RR 0.40”,”member”:[“sim6”,”sim9”,”sim25”]}
            ]},  
            {“name”:”TR 0.5”,”cluster”:[
                    {“name”:”RR 0.30”,”member”:[“sim1”,”sim5”,”sim10”]},
                    {“name”:”RR 0.35”,”member”:[“sim3”,”sim7”,”sim15”]},
                    {“name”:”RR 0.40”,”member”:[“sim6”,”sim9”,”sim25”]}
            ]}
    ]}
]}

the expected output HTML list would look like:

<UL>
   <LI>SEIR
      <UL>
         <LI>TR 0.25
            <UL>
               <LI>RR 0.25
                  <UL>
                     <LI>sim1</LI>
                     <LI>sim5</LI>
                     <LI>sim10</LI>
                  </UL>
               </LI>
               <LI>RR 0.50
                  <UL>
                     <LI>sim3</LI>
                     <LI>sim7</LI>
                     <LI>sim15</LI>
                  </UL>
               </LI>
            </UL>
         </LI>
         <LI>TR 0.25
            <UL>
               <LI>RR 0.25
                  <UL>
                     <LI>sim1</LI>
                     <LI>sim5</LI>
                     <LI>sim10</LI>
                  </UL>
               </LI>
               <LI>RR 0.50
                  <UL>
                     <LI>sim6</LI>
                     <LI>sim9</LI>
                     <LI>sim25</LI>
                  </UL>
               </LI>
            </UL>
         </LI>
      </UL>
   </LI>
.
.
.
.
.

I have written the following javascript code

function appendClusterNode(data){
    var liNode = document.createElement('li');
    var textNode = document.createTextNode(data.name);
    liNode.appendChild(textNode);
    if(data['cluster']){
        alert('Cluster Present');
        var newULNode = document.createElement('ul');
        var tempNode;
        for (var cluster = 0 ; cluster < data.cluster.length ; cluster++){
            alert(data.cluster[cluster].name);
            tempNode = appendClusterNode(data.cluster[cluster]);
            newULNode.appendChild(tempNode);
        }
        liNode.appendChild(newULNode);
    }else{
        if('member'){
            var ulNode = createElement('ul');
            var tempLINode;
            for (var member = 0 ; member < data.member.length ; member++){
                tempLINode = document.createElement('li');
                tempLINode.appendChild(document.createTextNode(data.member[member]));
                ulNode.appendChild(tempLINode);
            }
            liNode.appendChild(ulNode);
        }
    }
    return liNode;
}
function appendRootNode(node, data){
    var ulNode = document.createElement('ul');
    var liNode = document.createElement('li');
    var textNode = document.createTextNode(data.name);
    liNode.appendChild(textNode);
    if(data['cluster']){
        var newULNode = document.createElement('ul');
        var tempNode;
        for (var cluster = 0 ; cluster < data.cluster.length; cluster++){
            alert(data.cluster[cluster].name);
            tempNode = appendClusterNode(data.cluster[cluster]);
            newULNode.appendChild(tempNode);
        }
        liNode.appendChild(newULNode);
    }
    ulNode.appendChild(liNode);
    node.appendChild(ulNode);
}
//Below is the simple JSON UL string
var JSONString = '{"name":"Epidemic","cluster":[{"name":"SEIR","cluster":[{"name":"RR 0.30","member":["sim1","sim5","sim10"]},{"name":"RR 0.35","member":["sim3","sim7","sim15"]}]},{"name":"SIR","member":["1","2","3"]}]}';
var JSONData = JSON.parse(JSONString);
appendRootNode(document.getElementById("hierarchy"), JSONData);

This code is not producing the desired output. I think I am going wrong while a function in a function .

Answer 1

The following code worked for me -

        function appendMemberNode(data){
        var mULNode = document.createElement('ul');
        var mLINode;
        var mTextNode;
        for (var  i = 0 ; i < data.length ; i++){
            mLINode = document.createElement('li');
            mTextNode = document.createTextNode(data[i].name);
            mLINode.appendChild(mTextNode);
            if (i == data.length-1){
                mLINode.setAttribute("class","member last");
            }else{
                mLINode.setAttribute("class","member");
            }
            mULNode.appendChild(mLINode);
        }
        return mULNode
    }
    function appendClusterNode(data){
        var cULNode = document.createElement('ul');
        var cLINode; 
        var cTextNode;
        for (var i = 0 ; i < data.length ; i++){
            cLINode = document.createElement('li');
            cTextNode = document.createTextNode(data[i].name);
            cLINode.appendChild(cTextNode);
            if (data[i]['cluster']){
                var cTempNode = appendClusterNode(data[i].cluster);
                cLINode.appendChild(cTempNode);
            }else{
                // Has leaf Nodes i.e. Has Members
                var mTempNode = appendMemberNode(data[i].member);
                cLINode.appendChild(mTempNode);
            }
            if (i == data.length-1){
                cLINode.setAttribute("class","last");
            }
            cULNode.appendChild(cLINode);
        }
        return cULNode;
    }
    function appendRootNode(node, data){
        var rootULNode = document.createElement('ul');
        var rootLINode = document.createElement('li');
        var rootTextNode = document.createTextNode(data.name);
        rootLINode.appendChild(rootTextNode);
        if (data['cluster']){
            var tempNode = appendClusterNode(data.cluster);
            rootLINode.appendChild(tempNode);
        }
        rootULNode.appendChild(rootLINode);
        rootULNode.setAttribute("class","collapsibleList");
        rootULNode.setAttribute("id","clustering");
        node.appendChild(rootULNode);
    }

I think I might still optimize the code.