complex iteration logic in hogan js?

Question

I'm trying to learn expressjs, I have a controller which queries a db, and returns a JSON object which looks something like this:

[ { _id: 58cb851721c1c107ab436686,                                                                                                                             
   title: 'some title',                                                                                                                        
   content: 'this is content' },                                                                                                           
  { _id: 58cb856321c1c107ab436688,                                                                                                                             
   title: 'ah yes',                                                                                                                                           
   content: 'more title and contents' } 
   ...
   ...
]

What I now want to do is display every element in the array in a MDL card layout. So, If the above json object has 20 objects, there should be 20 cards each showing values of their respective _id, title and content properties. To do that I'll have to use a for loop somewhat like this:

for(var i = 0; i < data.length; i++) {
    <span> {{ data[i]._id }} </span> </br>
    <span> {{ data[i].title }} </span> </br>
    <span> {{ data[i].content }} </span> </br>
  }

This is clearly very easy with something like ejs because it allows loop logic inside the templates. But I have no clue how to do that in HoganJS's lack of a proper documentation clearly isn't helping. I've searched a lot on the interwebs with no avail. Currently I'm rendering the template like:

res.render('index');

Is it possible to do this in hogan, how? or I'll need to do some gymnastics in my routes?

Answer 1

Hogan.js was developed against the mustache test suite, so everything that holds true for templates as specified, is also the case for hogan.js.

Check https://mustache.github.io/mustache.5.html

Something like this should work:

var obj = {
  data: [{ 
    _id: 58cb851721c1c107ab436686,                                                                                                                             
    title: 'some title',                                                                                                                        
    content: 'this is content'
  }, {
    _id: 58cb856321c1c107ab436688,                                                                                                       
    title: 'ah yes',                                                                                                                                           
    content: 'more title and contents'
  },  
  ...
  ]};

and the template:

{{#data}}
  <span>{{_id}}</span>
  <span>{{title}}</span>
  <span>{{content}}</span>
{{/data}}