I am new to Mustache, please bear with me :)
I have an array in my JSON
"prop":{"brands":["nike","adidas","puma"]}
if I have the template like this
{{#prop}}
<b>{{brands}}</b>
{{prop}}
and I want to get something like:
<b>nike</b>
<b>adidas</b>
<b>puma</b>
I understand the elements in the array are not hash key-value pairs, however I am wondering if there is anyway in mustache that I can iterate through the elements.
Thanks!
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
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.
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}}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With