JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
<a href="#" id="go">Mustache GO!</a>
<div id="cnt"> </div>
CSS
body {padding: 10px;}
#go { display: block; margin-bottom: 5px; border-radius: 3px; background: red; padding: 3px; color: #fff;}
#cnt { background: #ccc; width: 100%; min-height: 100px;}
JavaScript
var data = {
"0": {
"Dosage": "25",
"Drug": "Indocin",
"Patient": "David",
"Date": "15/11/2012 14:29:14"
},
"1": {
"Dosage": "50",
"Drug": "Enebrel",
"Patient": "Sam",
"Date": "15/11/2012 14:29:14"
},
"2": {
"Dosage": "10",
"Drug": "Hydralazine",
"Patient": "Christoff",
"Date": "15/11/2012 14:29:14"
},
"3": {
"Dosage": "21",
"Drug": "Combivent",
"Patient": "Janet",
"Date": "15/11/2012 14:29:14"
},
"4": {
"Dosage": "100",
"Drug": "Dilantin",
"Patient": "Melanie",
"Date": "15/11/2012 14:29:14"
}
};
$('#go').click(function() {
var JsonArray = [];
for (var i = 0, somename; (somename= data[i]); ++i) {
JsonArray .push(somename);
}
var template = "{{#JsonArray }}<p>{{Drug}}</p>{{/JsonArray }}";
var html = Mustache.to_html(template, {JsonArray : JsonArray });
$(html).appendTo("#cnt");
return false;
});