title: How to fetch json data from external url and compile list of objects using a handlebars template, then render it in bootstrap list?
body: <p>I am trying to load some JSON data from this external URL <a href="http://jsonplaceholder.typicode.com/users" rel="nofollow noreferrer">http://jsonplaceholder.typicode.com/users</a></p>
  
  <p>I really can't figure this out. I'm trying out Handlebars.js, but it doesn't display anything in my template except the bootstrap list I've created. Here's what I've got:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-2.2.0.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;script&gt;
    $.ajax({
    url: 'http://jsonplaceholder.typicode.com/users',
    dataType:'json'
    success: function(names){
      var source = $('#tpl').html();
      var template = Handlebars.compile(source);
      var context = names;
  
      $('#container').html(template(context));
    }
      });
      &lt;/script&gt;
  &lt;div id="users"&gt;&lt;/div&gt;
  &lt;script id="tpl" type="text/template"&gt;
      &lt;ul&gt;
          {{#each name}} 
            &lt;li&gt;{{this}}&lt;/li&gt;
          {{/each}} 
      &lt;/ul&gt;
    &lt;/script&gt;
  &lt;div class="container"&gt;
    &lt;ul class="list-group"&gt;
  &lt;li class="list-group-item"&gt;Leanne Graham&lt;/li&gt;
  &lt;li class="list-group-item"&gt;Ervin Howell&lt;/li&gt;
  &lt;li class="list-group-item"&gt;Clementine Bauch&lt;/li&gt;
  &lt;li class="list-group-item"&gt;Patricia Lebsack&lt;/li&gt;
  &lt;li class="list-group-item"&gt;Chelsey Dietrich&lt;/li&gt;
  &lt;li class="list-group-item"&gt;Mrs. Dennis Schulist&lt;/li&gt;
  &lt;li class="list-group-item"&gt;Kurtis Weissnat&lt;/li&gt;
  &lt;li class="list-group-item"&gt;Nicholas Runolfsdottir V&lt;/li&gt;
  &lt;li class="list-group-item"&gt;Glenna Reichert&lt;/li&gt;
  &lt;li class="list-group-item"&gt;Clementina DuBuque&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated:(</p>