JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
<div id="template-ul">
<h3>{{name}}</h3>
<ul>
{{#students}}
<li>{{name}} - {{age}}</li>
{{/students}}
</ul>
</div>
<div id="template-table">
<h3>{{name}}</h3>
<table>
<thead>
<th>Name</th>
<th>Age</th>
</thead>
<tbody>
{{#students}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
</tr>
{{/students}}
</tbody>
</table>
</div>
JavaScript
var testing = {
"name" : "student-collection",
"students" : [
{
"name" : "John",
"age" : 23
},
{
"name" : "Mary",
"age" : 21
}
]
};
var divUl = document.getElementById("template-ul");
var divTable = document.getElementById("template-table");
divUl.innerHTML = Mustache.render(divUl.innerHTML, testing);
divTable.innerHTML = Mustache.render(divTable.innerHTML, testing);