Handlebars Nested Iteration

Nest loop with access to any level properties

by Ben Clayton

HTML

<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.min-c90cfe2.js"></script>
<script id="family-template" type="text/x-handlebars-template">
{{#each families}}
  {{#each members}}
    <p>{{firstname}} {{../surname}}</p>
  {{/each}}
{{/each}}
</script>

<div id="output"></div>

JavaScript

var data= 
{
      "families" : [
    {
      "surname": "Jones",
      "members": [
        {"firstname": "Jim"},
        {"firstname": "John"},
        {"firstname": "Jill"}
      ]
    },
    {
      "surname": "Smith",
      "members": [
        {"firstname": "Steve"},
        {"firstname": "Sally"}
      ]
    }
  ]
};


var htmltmpl = $("#family-template").html();
var template = Handlebars.compile(htmltmpl);
$('#output').html(template(data));