JSFiddle - React, Tailwind, and code Playground

by Jim Schubert

HTML

<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
<script id="template" class="template" type="text/x-mustache">
{{#a}}
<p>{{n}}</p>
{{/a}}
</script>

<h1>Output</h1>
<div id="output">
</div>

JavaScript

$(function() {
    var names = {
        "a": [
            {
            "foo": {
                "name": "foo name"
            }},
        {
            "bar": {
                "name": "bar name"
            }},
        {
            "zap": {
                "name": "zap name"
            }}
        ],
        "n": function() {
            var self = this;
            var n = "";
            Object.keys(self).forEach(function(k, v) {
                if (typeof self[k] == "object") {
                    if(!n) n = self[k]["name"];
                }
            });
            return n;
        }
    };

    var template = $('#template').html();
    var out = $('#output');
    var html = Mustache.to_html(template, names);
    console.log(html);
    out.html(html);
});