Can mustache iterate a top-level array?

Question

My object looks like this:

['foo','bar','baz']

And I want to use a mustache template to produce from it something like this:

"<ul><li>foo</li><li>bar</li><li>baz</li></ul>"

But how? Do I really have to munge it into something like this first?

{list:['foo','bar','baz']}

Answer 1

You can do it like this...

Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>', ['foo','bar','baz']);

It also works for things like this...

var obj = [{name: 'foo'}, {name: 'bar'}];
var tmp = '<ul>{{#.}}<li>{{name}}</li>{{/.}}</ul>';
Mustache.render(tmp, obj);

Answer 2

I had the same problem this morning and after a little experimentation I discovered you can use the {{.}} to refer to the current element of an array:

<ul>
  {{#yourList}}
  <li>{{.}}</li>
  {{/yourList}}
</ul>

Answer 3

Building on @danjordan's answer, this will do what you want:

Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);

returning:

<ul><li>foo</li><li>bar</li><li>baz</li></ul>

Answer 4

Following are the examples to render multi-dimensional array in a template:

Example 1

'use strict';

var Mustache = require('mustache');

var view = {test: 'div content', multiple : ['foo', 'bar'], multiple_2 : ['hello', 'world']};
var template = '<div>{{test}}</div><ul>{{#multiple}}<li>{{.}}</li>{{/multiple}}</ul><ul>{{#multiple_2}}<li>{{.}}</li>{{/multiple_2}}</ul>';

var output = Mustache.render(template, view);

console.log(output);

Example 2

'use strict';

var Mustache = require('mustache');

var view = {test: 'div content', multiple : [{name: 'foo', gender: 'male'}, {name: 'bar', gender: 'female'}], multiple_2 : [{text: 'Hello', append: '**', prepend: '**'}, {text: 'World', append: '**', prepend: '**'}]};
var template = '<div>{{test}}</div><ul>{{#multiple}}<li>Hello my name is {{name}}. And I am {{gender}}</li>{{/multiple}}</ul><ul>{{#multiple_2}}<li>{{prepend}}_{{text}}_{{append}}</li>{{/multiple_2}}</ul>';

var output = Mustache.render(template, view);

console.log(output);

For test run, save above examples in file called 'test.js', run following command in commandline

nodejs test.js

Answer 5

Simplest solution for an array named Strengths:

{
   "ViewModel": 
    {
       "StrengthsItems": 
        {
           "Strengths": ["Dedicated", "Resourceful", "Professional", "Positive"]
        }
    }
}

works for me like a charm is as following:

{{#ViewModel.StrengthsItems}}
    <p class="p4">{{Strengths}}</p>
{{/ViewModel.StrengthsItems}}

Answer 6

I don't think mustache can do this! (surprisingly) You can iterate over a list of objects, and then access the attributes of each object, but you can't seem to iterate over a simple list of values!

So, you have to transform your list into:

[ {"value":"foo"},{"value":"bar"},{"value":"baz"} ] 

and then your template would be:

<ul>
  {{#the_list}}
  <li>{{value}}</li>
  {{/the_list}}
</ul>

To me, this seems like a severe problem with Mustache -- any template system should be able to loop over a list of simple values!