0

我的页面中有以下内容，准备好：

<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>

和下面的 JavaScript 触发：

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 was performed.');          
});

$("#result").html(template(data));

我收到加载已执行的警报，我可以在 Firebug 中看到所有数据，但 #result div 不显示数据。

如果我用下面的纯文本替换 var 数据，它的所有功能都完全正确：

var data = { athletes: [
    {firstName: "Josh", lastName: "Hamilton"},
    {firstName: "Yu", lastName: "Darvish"},
    {firstName: "Ian", lastName: "Kinsler"}
  ] }

“athletes”键位于 JSON 树中的几层（体育 -> 联赛 -> 运动员）。关于如何从 API 结果中提取这些数据，我有什么不明白的地方？

4

3 回答 3

1

您使用 $.getJSON 错误。它不返回数据，而是调用成功函数（我相信你正在提醒的地方）并将数据传递给它。将您的 html 人口移动到成功回调中。

这样做是因为默认情况下 AJAX 请求本质上是异步的

于 2012-06-29T04:10:35.683 回答
0

尝试这样的事情：

$.getJSON("http://api.espn.com/v1/sports/baseball/mlb/athletes?apikey=axfy7dvwqzktu28srdjna8ta", function(data) {
      alert('Load was performed.');
      $("#result").html(template(data.sports[0].leagues[0].athletes));          
});

另外，一个重要的旁注：你已经粘贴了你的 apikey。我想你想保密。

于 2012-06-29T04:58:33.503 回答
0

如果由于某种原因您无法更改$.get()to $.getJSON()，则必须JSON.parse(theData)在成功回调中进行更改，否则模板将没有要呈现的数据。（现在很明显，但是当我遇到这种情况时花了我一点时间。）

于 2017-12-11T21:06:22.503 回答