javascript - looping with handlebar.js -

this question has answer here:

• how return response asynchronous call? 24 answers

hi have following issue. i'm trying loop through each chapter output verse nothing 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 template script   var thetemplatescript = $("#built-in-helpers-template").html();    // compile template   var thetemplate = handlebars.compile(thetemplatescript);    // call template on 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 template   var thecompiledhtml = thetemplate(content);    // add compiled html page   $('.content-placeholder').html(thecompiledhtml);  });  </script> 

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

you're rendering template content not filled in yet since ajax call has not completed. put thecompiledhtml calculation , assignment of result content-placeholder success callback.