JSFiddle - React, Tailwind, and code Playground

by Guinsly Michel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
<script id="built-in-helpers-template" type="text/x-handlebars-template">
   {{#each chapter}}
    <ol>
    	<li> {{ verse}}</li>
    </ol>
  {{/each}}
</script>

JavaScript

$(function () {

  // Grab the template script
  var theTemplateScript = $("#built-in-helpers-template").html();

  // Compile the template
  var theTemplate = Handlebars.compile(theTemplateScript);

  // We will call this template on an array of objects
  var content = "";
  jQuery.ajax({
    url:'https://getbible.net/json',
    dataType: 'jsonp',
    data: 'p=John1&v=kjv',
    jsonp: 'getbible',
    success:function(json){
    	content = json;
    	console.log(content);
    },
  });

  // Pass our data to the template
  var theCompiledHtml = theTemplate(content);

  // Add the compiled html to the page
  $('.content-placeholder').html(theCompiledHtml);

});