title: Dont know how to fetch json data using jquery with handlebars
body: <p>Hi am new to <code>JSON</code> and all stuff people said about JavaScript templating engine for front end dynamic changes but but i cant able to proceed with this help me out</p>
  
  <p>json file data.json</p>
  
  <pre><code>    {
      users: [{
          username: "alan",
          firstName: "Alan",
          lastName: "Johnson",
          email: "alan@test.com"
      }, {
          username: "allison",
          firstName: "Allison",
          lastName: "House",
          email: "allison@test.com"
      }, {
          username: "ryan",
          firstName: "Ryan",
          lastName: "Carson",
          email: "ryan@test.com"
      }]
  }
  </code></pre>
  
  <p>by using get method in jquery i got the response of json file</p>
  
  <pre><code> $(function() {
      var raw_template = $('#entry-template').html();
      var template = Handlebars.compile(raw_template);
      var placeHolder = $("#3cols");
      $.get("js/data.json", function(datas, status, xhr) {
          $.each(datas, function(key, val) {
              var html = template(val);
              placeHolder.append(html);
          });
      });
  })
  </code></pre>
  
  <p>and my template is like</p>
  
  <pre><code>    &lt;script id="entry-template" type="text/x-handlebars-template"&gt;          
       {{#each users}}
                &lt;div class="col-md-4"&gt;
                  &lt;h2&gt;{{username}}&lt;/h2&gt;
                  &lt;p&gt;{{firstName}}&lt;/p&gt;
                  &lt;p&gt;&lt;a href=""&gt;{{email}}&lt;/a&gt;
                  &lt;/p&gt;
                &lt;/div&gt;
          {{/each}}
      &lt;/script&gt;
  </code></pre>
  
  <p>I want data to append in</p>
  
  <pre><code> &lt;div id="3cols" class="row"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>dont know what is happening nothing shows on screen but in console am getting response from json but no output</p>