JSFiddle - React, Tailwind, and code Playground

by qfox

HTML

<script src="https://rawgit.com/moappi/jquery.json2html/master/json2html.js"></script>
<script src="https://rawgit.com/moappi/jquery.json2html/master/jquery.json2html.js"></script>
<div id="json-parse"></div>

JavaScript

// $("#json-parse").json2html(stats, footertemplate); 

var data = {
  caption: "Cap",
  people: [ 'John', 'Malkovich', 'Doe' ]
};

var transform = [
    { tag : 'h1', html : function (v) {
        return v.caption ? v.caption + ': ' : '';
    } },
    { tag : 'section', children : function (ctx) {
        return json2html.transform(ctx.people, {
            tag : 'span', html : function (person, i) {
                return person + (i < ctx.people.length - 1 ? ', ' : '');
            }
        } );
    } }
];

$("#json-parse").text(json2html.transform(data, transform));