handlebars loop is not showing proper data - handlebars.js

Question

I am using handle bars to loop through an array of objects that it gets from a get request:
<div id="content-placeholder"></div>
<script id="some-template" type="text/x-handlebars-template">
{{#each this}}
{{name}}
{{/each}}
</script>
<script>
var source = $("#some-template").html();
var template = Handlebars.compile(source);
var data = $.get('http://localhost:3000/teams.json');
console.log(data.responseJSON);
$("#content-placeholder").html(template(data));
</script>
The JSON is in the form:
[
0: {name: 'name1'},
1: {name: 'name2'},
...
]
The get request is returning the right data, but for some reason, the name is not being displayed in the html. Instead, different parts of the request are. Here is what the html looks like:
GETRESPONSEHEADER
GETALLRESPONSEHEADERS
SETREQUESTHEADER
...
There are no errors in the console. How do I fix this?

Answer 1

as stated at https://api.jquery.com/jquery.get/, $.get() function returns a superset of the XMLHTTPRequest object. So, what you are actually printing is names of this object's methods. The object returned by $.get() function implements a Promise with done() method, so we can execute our code asynchronously as follows:
<script>
var source = $("#some-template").html();
var template = Handlebars.compile(source);
var data = $.get('teams.json');
data.done(function (data) {
console.log(data.responseJSON);
$("#content-placeholder").html(template(data));
});
</script>
we also could do it as a callback function:
<script>
var source = $("#some-template").html();
var template = Handlebars.compile(source);
var data = $.get('teams.json', function (data) {
console.log(data.responseJSON);
$("#content-placeholder").html(template(data));
});
</script>
please note that data variable within callback or promise done() function is a local variable of their anonymous function and not the same as data returned by $.get() function.
plunker: http://plnkr.co/edit/zveLAFNWvaDTmLFdLkLW