JSFiddle - React, Tailwind, and code Playground

by fergal_doyle

HTML

<script src="//raw.github.com/olado/doT/master/doT.min.js"></script>
<div id="template" style="display:none">
  
  {{ function buildList(a) { }}
    <ul class="list">
      {{~a :item}}
        {{?item.children}}
          <li class="cat-closed">
          <h4 class="cat-sub-heading"><a href="?cat=catID&subcat={{=item.id}}" data-id="{{=item.id}}" class='cat-expand' >{{=item.name}}</a></h4>
          {{?item.children.length}}
            {{ buildList(item.children); }}
          {{?}}
          </li>
        {{??}}          
          <li>
            <a href="?asset={{=item.id}}" data-id="{{=item.id}}" class="cat-asset-link" >{{=item.name}}</a>
          </li>         
        {{?}}
      {{~}}
    </ul>
  {{ } }}
  
  {{ buildList( it[0].children ); }}
    
</div>

<div id="out"></div>



<textarea style="display:none">
[{"id":"c111","children":[{"name":"Case Studies","id":"c128","parent":"c111","priority":"","type":"","desc":"","children":[{"name":"Penoles Case Study ","cat_prior":"c128;","id":"348","parent":"c128","priority":0},{"name":"Post Denmark Case Study","cat_prior":"c128;","id":"352","parent":"c128","priority":0},{"name":"Sprint Case Study","cat_prior":"c128;","id":"480","parent":"c128","priority":0}]},{"name":"Testimonials ","id":"c129","parent":"c111","priority":"","type":"","desc":"","children":[{"name":"Post Denmark Video","cat_prior":"c130; c129;","id":"353","parent":"c129","priority":0},{"name":"Premier Customer Testimonial","cat_prior":"c129;","id":"354","parent":"c129","priority":0}]},{"name":"Videos ","id":"c130","parent":"c111","priority":"","type":"","desc":"","children":[{"name":"Post Denmark Video","cat_prior":"c130; c129;","id":"353","parent":"c130","priority":0},{"name":"Vodafone Germany ","cat_prior":"c130;","id":"467","parent":"c130","priority":0}]}]}]  
</textarea>

JavaScript

/** doT.js recursive function - assets **/
var template = $("#template").html();
var data = JSON.parse($("textarea").val());

console.log(data)

doT.db = {}        
doT.db.linkList = doT.template(template);

console.log(doT.db.linkList(data));
$("#out").html(doT.db.linkList(data));