javascript - Able to get JSON data, but not showing up in Handlebars template -
i have following in page, ready to:
<div id="result"></div> <script id="some-template" type="text/x-handlebars-template"> <table> <thead> <th>name</th> </thead> <tbody> {{#athletes}} <tr> <td>{{firstname}} {{lastname}}</td> </tr> {{/athletes}} </tbody> </table> </script>
and following javascript firing below:
var source = $("#some-template").html(); var template = handlebars.compile(source); var data = $.getjson("http://api.espn.com/v1/sports/baseball/mlb/athletes?apikey=axfy7dvwqzktu28srdjna8ta", function() { alert('load performed.'); }); $("#result").html(template(data));
i alert load performed , can see data in firebug, #result div not display data.
if replace var data straight text below functions right:
var data = { athletes: [ {firstname: "josh", lastname: "hamilton"}, {firstname: "yu", lastname: "darvish"}, {firstname: "ian", lastname: "kinsler"} ] }
the "athletes" key couple layers down in json tree (sports -> leagues -> athletes). not understanding how extract data api result?
try this:
$.getjson("http://api.espn.com/v1/sports/baseball/mlb/athletes?apikey=axfy7dvwqzktu28srdjna8ta", function(data) { alert('load performed.'); $("#result").html(template(data.sports[0].leagues[0].athletes)); });
also, important sidenote: have pasted apikey. think keep private.
Comments
Post a Comment