JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://examples.kevinchisholm.com/javascript/libraries/mustache.js"></script>
<!-- Mustache.js example - blog.kevinchisholm.com -->
<!-- this is the HTML template -->
<script type="text/html" id="template">
<h1>My Favorite European Cities</h1>
<ul>
{{#cities}}
<li>{{name}}</li>
{{/cities}}
</ul>
</script>
<!-- this div is empty on page load -->
<div id="container"></div>
JavaScript
(function(){
//this is our JSON (data)
var data = {
"cities": [
{"name": "London"},
{"name": "Paris"},
{"name": "Munich"}
]
},
//get a reference to our HTML template
template = $('#template').html(),
//tell Mustache.js to iterate through the JSON and insert the data into the HTML template
output = Mustache.render(template, data);
//append the HTML template to the DOM
$('#container').append(output);
})();