Native Javascript
Copy and paste this into an html file and open with your favourite browser to get started
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/2.2.3/json2html.min.js"></script> <script> let data = [ {"title":"Heat","year":"1995"}, {"title":"Snatch","year":"2000"}, {"title":"Up","year":"2009"}, {"title":"Unforgiven","year":"1992"}, {"title":"Amadeus","year":"1984"} ]; let template = {'<>':'div','html':'${title} ${year}'}; //render document.write( json2html.render(data,template) ); </script>
jQuery
Copy and paste this into an html file and open with your favourite browser to get started
<script src="https:////ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/2.2.3/json2html.min.js"></script> <script> $(function(){ let data = { "employees":[ {"name":"dorian"}, {"name":"monica"}, {"name":"jill"}, {"name":"ashley"} ] }; let template = {'<>':'ul','html':[ {'<>':'li','obj':function(){return(this.employees)},'html':[ {'<>':'span','text':'${name}'}, {'<>':'a','href':'#','style':'margin-left:5px;','onclick':function(){$(this).parent().remove()},'text':'remove'} ]} ]}; //render with events $('body').json2html(data,template); }); </script>
Node.js
Copy and paste this into a js file and run with node
const json2html = require('node-json2html'); let data = { "employees":[ {"name":"dorian"}, {"name":"monica"}, {"name":"jill"}, {"name":"ashley"} ] }; let template = {'<>':'ul','html':[ {'<>':'li','obj':function(){return(this.employees)},'html':[ {'<>':'span','text':'${name}'} ]} ]}; //render and output console.log( json2html.render(data,template) );