How do I use nested iterators with Mustache.js or Handlebars.js?

Question

I would like to use handlebars.js or mustache.js to iterate over a list of families, and then iterate over that family\'s members. Inside of both loops, I want to display pr

Answer 1

You can nest sections easily with lists of objects. Use a data structure where families is a list that has an object members that has a list of any objects (or even more lists)like:

{
  "families" : [
        {
          "surname": "Jones",
          "members": [
            {"given": "Jim"},
            {"given": "John"},
            {"given": "Jill"}
          ]
        },
        {
          "surname": "Smith",
          "members": [
            {"given": "Steve"},
            {"given": "Sally"}
          ]
        }
      ]
}

You would be able to populate a template like:

    {{#families}}
    
{{surname}}
      

        {{#members}}
        
{{given}}
        {{/members}}
      
    
    {{/families}}
  

jsFiddle is currently down so here's the full working HTML with JS: