Mustache.js: Iterate over a list received via json

Question

Possible Duplicate:
Mustache JS Template with JSON Collection

I have a json response like this that I want to use with Mustache.js:

[
    {"id": "1", "details": {"name": "X", "type":"Y" }},
    {"id": "2", "details": {"name": "aName", "type":"something" }}
]

How do I iterate over this using mustache.js?

I don't see how it is a duplicate. Neither the linked question's title is descriptive, nor there is an accepted answer. — Stealth, Aug 11 '12 at 13:28
The funny thing is, the post that this is "a duplicate of" references this question. — Carcigenicate, Dec 23 '15 at 17:14

score 16 · Answer 1 · answered Aug 10 '12 at 16:37

16

The array itself should be a value in a bigger Object, like so:

var obj = {
  arr: [
    {"id": "1", "details": {"name": "X", "type":"Y" }},
    {"id": "2", "details": {"name": "aName", "type":"something" }}
  ]
}

Then you can do:

{{#arr}}
   my id: {{id}}
{{/arr}}

the use for {{#bla}} is actually overloaded. When the property it acts upon is an array it will loop. When the property is an object itself it will 'enter' that object. Given your example:

{{#arr}}
   my id: {{id}} <br/>
   {{#details}}
     and my name: {{name}}
   {{/details}}
{{/arr}}

answered Aug 10 '12 at 16:37

Geert-Jan

18,623
16
75
137

2

Thanks for your answer. I also found another way of doing it which you may find easier as well. Please see below. – Stealth Aug 10 '12 at 20:50
@Geert-Jan thanks it helped me. I had to do this: `$('.some #selector').append(Mustache.render(someTemplateTpl, {arrayOfObjects: classObject.arrayOfJsons}));` so array of objects named _arrayOfJsons_ inside class _classObject_ had to be assigned as a value of _arrayOfObjects_ property inside object. But earlier, when I used this code: `$('.some #selector').append(Mustache.render(someTemplateTpl, classObject.arrayOfJsons));` it didn't worked, template has been rendered partially - only static html parts, but dynamic ones based on Json's properties (i.e. if-else like statements) weren't. Why? – spaffy Jan 14 '16 at 14:21

score 13 · Accepted Answer · edited May 13 '15 at 21:26

13

I found another way of doing this which is pretty similar to Geert-Jan except that you do not have to assign the array to a Javascript object.

{{ #. }}
   <p> {{ id }} </p>
   <ul> {{#details}}
        {{name }}
        {{ type }}
   {{/details}}
   </ul>
{{ /. }}

edited May 13 '15 at 21:26

eatonphil

13,115
27
76
133

answered Aug 10 '12 at 20:49

Stealth

1,559
4
16
34

yep indeed. Didn't know the dot worked on a top-level object as well. – Geert-Jan Aug 10 '12 at 21:03
I can't seem to get this to work using I Can Haz. Is there something I'm missing? – streetlight Feb 13 '13 at 14:13
I can't seem to get this to work (I'm using I Can Haz). Is there something I'm missing, because this would be awesome! – streetlight Feb 13 '13 at 14:23
4

the first {{/.}} needs to be {{#.}} – marty Apr 02 '13 at 18:19
I am not able to make it work, any other iterators you guys suggest – Matt Sep 02 '13 at 13:12
I have appended the incoming json data like data = { 'roles': data }; $.ajax({ dataType: "json", url: '/api/TestApi/GetAllRole', success: function (data) { data = { 'roles': data }; // formatting the data to support the mustache format var html = Mustache.to_html($('#RoleTemplate').html(), data); $('#tblRole').append(html); } }); – Matt Sep 05 '13 at 04:55

Mustache.js: Iterate over a list received via json

2 Answers2

Linked