迭代JSON对象的最快/最佳方式

Question

我从我的服务器API获取JSON格式的数据，我正在解析它以填充我的ul和li标签。

以下是我的原始数据格式。

[{"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"}]

我的最终目标是绘制这种格式的HTML。

<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>

基本上是格式

2016
    Nov
        Post1
        Post2
2015
   June
        Post3

所以，为此，我最初将原始数据转换为数组。

How to modify/retransform JSON array structure

{
  "2015": {
    "Jun": [
      "Post3"
    ]
  },
  "2016": {
    "Nov": [
      "Post1",
      "Post2"
    ]
  }
}

然后使用 3 NESTED LOOP 生成HTML。我很强烈地感觉到这种计算可以减少。任何指导都将不胜感激。

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>
';
}