Mustache templating with an array of objects
-
28-10-2019 - |
Question
I am trying to template the following array of objects:
var arr = [{name:"Ryan Pays", url:"http://www.ryanpays.com"}, {name:"foo", url:"http://www.google.com"}];
I convert that array to an object like so:
arr = $.extend({}, arr);
Which gives me the following object:
{
0:{name:"Ryan Pays", url:"http://www.ryanpays.com"},
1:{name:"foo", url:"http://www.google.com"}
}
Using Mustache i want to enumerate over that object with the following template:
var template = "<h4>Your friends' choices</h4>" +
"<ul>" +
"<li>" +
"<p><strong>{{name}}</strong> likes <a href='{{url}}'>this</a></p>" +
"</li>" +
"</ul>";
var html = Mustache.to_html(template, displayData);
$('.choices').html(html);
I don't seem to be able to do that. I can get the first result like to print like so:
var html = Mustache.to_html(template, displayData[0]);
And so on but not both.
Link to fiddle of this issue:
Solution
You could use the template for arrays :
var template = "<h4>Your friends' choices</h4>" +
"<ul>" +
"{{#arr}}"+
"<li>" +
"<p><strong>{{name}}</strong> likes <a href='{{url}}'>this</a></p>" +
"</li>" +
"{{/arr}}"+
"</ul>";
var html = Mustache.to_html(template, {arr:arr});
OTHER TIPS
You need to use Mustache's built-in iteration capabilities:
var template = "<h4>Your friends' choices</h4>" +
"<ul>{{#friends}}" +
"<li>" +
"<p><strong>{{name}}</strong> likes <a href='{{url}}'>this</a></p>" +
"</li>" +
"{{/friends}}</ul>";
var data = {friends: [{name:"Ryan Pays", url:"http://www.ryanpays.com"}, {name:"foo", url:"http://www.google.com"}]};
var html = Mustache.to_html(template, data);
the secret sauce is in the section declaration {{#friends}}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow