looping with handlebar.js

Question

Hi I have this following issue. I'm trying to loop through each chapter to output a verse but nothing is display.

<div class="content-placeholder"></div>

<script id="built-in-helpers-template" type="text/x-handlebars-template">
   {{#each chapter}}
    <ol>
        <li> {{ verse}}</li>
    </ol>
  {{/each}}
</script>

<script type="text/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);

});

</script>

jsfiddle (https://jsfiddle.net/gdiamond/v8dnn35j/1/)

thanks @torazaburo! you can post an answer so that I can vote it. :) — Papouche Guinslyzinho, Aug 25 '15 at 04:51

score 1 · Accepted Answer · answered Aug 25 '15 at 04:53

You're rendering the template with content which is not filled in yet since the ajax call has not completed. Put the theCompiledHtml calculation and the assignment of the result into content-placeholder into the success callback.

looping with handlebar.js

1 Answers1