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"}
  ] }

「アスリート」キーは、JSON ツリーの 2 層下にあります (スポーツ -> リーグ -> アスリート)。API の結果からこのデータを抽出する方法について、私が理解していないことは何ですか?

4

3 に答える 3

1

$.getJSON を間違って使用しています。データを返すのではなく、success 関数を呼び出して (警告していると思います)、それにデータを渡します。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 に答える