I get JSON data from my server API and I parse it to populate ul and li tags.
Below is my raw data format.
[{"id":"15","heading":"Post1","content":"Post 1 Content","date":"2016-11-09 08:51:37"}, {"id":"16","heading":"Post2","content":"Post 2 Content","date":"2016-11-09 08:52:09"}, {"id":"17","heading":"Post3","content":"Post 3 Content","date":"2015-06-09 08:52:09"}]
My ultimate goal is to draw the html of this format.
<li class="hideme coolclass" id="2015"> <a class="hideMeNav">[-]</a> <h2 class="msg">2015</h2> <ul id="list2015"> <li class="hideme coolclass" id="2015Nov"> <a class="hideMeNav">[-]</a> <h3 class="msg">Nov</h3> <ul id="list2015Nov"> <li class="coolclass anchor openpost" id="15"> <a href="#archive/15" style="display:block"> <div class="archiveiconsimg"><img src="http://www.telegraph.co.uk/content/dam/pets/2016/03/18/bunny-large_trans++qVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg"></div> Post1 </a> </li> </ul> </li> </ul> </li> <li class="hideme coolclass" id="2016"> <a class="hideMeNav">[-]</a> <h2 class="msg">2016</h2> <ul id="list2016"> <li class="hideme coolclass" id="2016Nov"> <a class="hideMeNav">[-]</a> <h3 class="msg">Nov</h3> <ul id="list2016Nov"> <li class="coolclass anchor openpost" id="16"> <a href="#archive/16" style="display:block"> <div class="archiveiconsimg"><img src="http://www.telegraph.co.uk/content/dam/pets/2016/03/18/bunny-large_trans++qVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg"></div> Post2 </a> </li> <li class="coolclass anchor openpost" id="17"> <a href="#archive/17" style="display:block"> <div class="archiveiconsimg"><img src="http://www.telegraph.co.uk/content/dam/pets/2016/03/18/bunny-large_trans++qVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg"></div> Post3 </a> </li> </ul> </li> </ul> </li>
This is mainly in the format
2016 Nov Post1 Post2 2015 June Post3
So, for this, I initially convert my raw data to an array.
How to change / relay JSON array structure
{ "2015": { "Jun": [ "Post3" ] }, "2016": { "Nov": [ "Post1", "Post2" ] } }
And then using this 3 NESTED LOOP to generate HTML. I get a strong feeling that this calculation can be reduced. Any recommendations would be appreciated.
for (var id in struct2) { result += ' <li class="hideme coolclass" id="'+id+'"> <a class="hideMeNav">[-]</a> <h2 class="msg">'+id+'</h2> <ul id="list'+id+'"> '; for(var _id in struct2[id]){ result += " <li class='hideme coolclass' id='"+id+_id+"'> <a class='hideMeNav'>[-]</a> <h3 class='msg'>"+_id+"</h3> <ul id='list"+id+_id+"'> "; for(var __id in struct2[id][_id]){ console.log(struct2[id][_id][__id].id); console.log(struct2[id][_id][__id].heading); console.log(struct2[id][_id][__id].content); result += " <li class='coolclass anchor openpost' id='"+struct2[id][_id][__id].id+"'> <a href='#archive/"+struct2[id][_id][__id].id+"' style='display:block'> <div class='archiveiconsimg'><img src='http://www.telegraph.co.uk/content/dam/pets/2016/03/18/bunny-large_trans++qVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg' ></div> "+struct2[id][_id][__id].heading+" </a> </li> " } result += ' </ul> </li> '; } result += ' </ul> </li> '; }