iterate through JSON array with mustache

Question

I am new to Mustache, please bear with me :)

I have an array in my JSON

\"prop\":{\"brands\":[\"nike\",\"adidas\",\"puma\"]}

if I h

Answer 1

mustache is logicless, so writing your own iteration/loop in it is impossible. It is easy to convert your JSON though. For example:

var json = '{"prop":{"brands":["nike","adidas","puma"]}}';
var obj = JSON.parse(json);
var data = {brands: obj.prop['brands'].map(function(x){ return {name: x}; })};

Gives you a data variable which will work with the template:

{{#brands}}
  <b>{{name}}</b>
{{/brands}}

Answer 2

This works

{{#json.props.brands}}
<h1>{{.}}</h1>
{{/json.props.brands}}

{{.}} When looping over an array of strings, a . can be used to refer to the current item in the list.

Answer 3

Here is a working fiddle: http://jsfiddle.net/Qa4UX/

Basically, you need to iterate over the brands array. Since your array is raw and does not have objects inside you have to reference each string like so:

{{#props}}
  <ul>
  {{#brands}}
    <li>
    {{#.}}
        <b>{{.}}</b>
    {{/.}}
    </li>
  {{/brands}}
  </ul>
{{/props}}

You can also find many more examples over here: https://github.com/janl/mustache.js#mustachejs---logic-less-mustache-templates-with-javascript