jquery - Generating nested UL list using JSON and Javascript -

my end goal create html list. list defined in 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 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 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;         (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;             (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;         (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 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 not producing desired output. think going wrong while function in function .

the following code worked me -

        function appendmembernode(data){         var mulnode = document.createelement('ul');         var mlinode;         var mtextnode;         (var  = 0 ; < 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;         (var = 0 ; < 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 might still optimize code.