Handlebar loop

Handlebar loop

by Christophe THIRY

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script id="sourceTemplate" type="text/x-handlebars-template">
  <ul>
    {{#each mainArr}}
    <li>
      <ul>
        {{#each items}}
        <li>value : {{this}}</li>
        {{/each}}
      </ul>
      {{/each}}
  </ul>
</script>

<div id="resultPlaceholder">
</div>

JavaScript

$(document).ready(function() {
  var context = {
    "mainArr" : [{
      items: [
        ["Object"],
        ["Object"],
        ["Object"],
        ["Object"]
      ]
    }, {
      items: [
        ["Object"],
        ["Object"],
        ["Object"],
        ["Object"]
      ]
    }, {
      items: [
        ["Object"]
      ]
    }]
  };
  var jqXHR = $.ajax({
    type: "POST",
    url: "/echo/json/",
    data: {
      json: JSON.stringify(context),
      delay: 1
    }
  });

  jqXHR.done(function(data) {
    var source = $("#sourceTemplate").html();
    var template = Handlebars.compile(source);
    var html = template(data);
    $("#resultPlaceholder").html(html);
  });


});