handlebars.js

by suraj mahajan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.0/handlebars.js"></script>
<div id="DocumentResults"></div>
<script id="document-template" type="text/x-handlebars-template">
  <div>
    {{#each this}}
    <div class="row">
      <div class="col-md-12">
        <h2>{{Category}}</h2>
        {{#each DocumentList}}
        <p>{{DocumentName}} at {{DocumentLocation}} - {{@index}}</p>
        <br>Smaple Names= <br> {{#each sampleName}} Name-> {{name}} at {{@index}} / {{@../index}}<br> {{/each}} {{/each}}
      </div>
    </div>
    {{/each}}

    <p>There are no documents available at this time</p>

  </div>
</script>

CSS

.row {
  border: 1px solid red;
}

JavaScript

$(function() {
  var source = $("#document-template").html();
  var template = Handlebars.compile(source);
  var html = template(data);
  $('#DocumentResults').html(html);
});



var data = [{
    Category: "General",
    DocumentList: [{
        DocumentName: "Document Name 1 - General",
        DocumentLocation: "Document Location 1 - General",
        sampleName: [{
            name: 'suraj'
          },
          {
            name: 'gay'
          },
        ]
      },
      {
        DocumentName: "Document Name 2 - General",
        DocumentLocation: "Document Location 2 - General",
        sampleName: [{
            name: 'suraj'
          },
          {
            name: 'gay'
          },
        ]
      }
    ]
  },
  {
    Category: "Unit Documents",
    DocumentList: [{
      DocumentName: "Document Name 1 - Unit Documents",
      DocumentList: "Document Location 1 - Unit Documents"
    }]
  },
  {
    Category: "Minutes"
  }
];