能够获取JSON数据，但不会出现在Handlebars模板中

时间：2012-06-29 04:04:01

标签： javascript api handlebars.js

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

<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树中是几层（体育 - ＆gt;联盟 - ＆gt;运动员）。我不了解如何从API结果中提取这些数据？

3 个答案:

答案 0 :(得分：1)

您使用$ .getJSON错误。它不会返回数据，而是调用成功函数（我相信它会发出警报）并将数据传递给它。将您的html人口移动到成功回调中。

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

答案 1 :(得分：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。我想你想保密。

答案 2 :(得分：0)

如果出于某种原因，您无法将npm WARN addRemoteGit Error: Command failed: git -c core.longpaths=true config --get remote.origin.url npm WARN addRemoteGit npm WARN addRemoteGit at ChildProcess.exithandler (child_process.js:272:12) npm WARN addRemoteGit at ChildProcess.emit (events.js:159:13) npm WARN addRemoteGit at maybeClose (internal/child_process.js:943:16) npm WARN addRemoteGit at Process.ChildProcess.handle.onexit (internal/childprocess.js:220:5) npm WARN addRemoteGit git+://github.com/GeekyAnts/react-native-keyboard-aware-scroll-view.git resetting remote C:\Users\jim\AppData\Roaming\npm-cache_git-remotes\git--github-com-GeekyAnts-react-native-keyboard-aware-scroll-view-git-8603b9f3 because of error: { Error: Command failed: git -c core.longpaths=true config --get remote.origin.url npm WARN addRemoteGit npm WARN addRemoteGit at ChildProcess.exithandler (child_process.js:272:12) npm WARN addRemoteGit at ChildProcess.emit (events.js:159:13) npm WARN addRemoteGit at maybeClose (internal/child_process.js:943:16) npm WARN addRemoteGit at Process.ChildProcess.handle.onexit (internal/childprocess.js:220:5) npm WARN addRemoteGit killed: false, npm WARN addRemoteGit code: 1, npm WARN addRemoteGit signal: null, npm WARN addRemoteGit cmd: 'git -c core.longpaths=true config --get remote.origin.url' } npm WARN addRemoteGit Error: Command failed: git -c core.longpaths=true config --get remote.origin.url npm WARN addRemoteGit npm WARN addRemoteGit at ChildProcess.exithandler (child_process.js:272:12) npm WARN addRemoteGit at ChildProcess.emit (events.js:159:13) npm WARN addRemoteGit at maybeClose (internal/child_process.js:943:16) npm WARN addRemoteGit at Process.ChildProcess.handle.onexit (internal/childprocess.js:220:5) npm WARN addRemoteGit git+://github.com/GeekyAnts/react-native-drawer.git resetting remote C:\Users\jim\AppData\Roaming\npm-cache_git-remotes\git--github-com-GeekyAnts-react-native-drawer-git-5dbe324d because of error: { Error: Command failed: git -c core.longpaths=true config --get remote.origin.url npm WARN addRemoteGit npm WARN addRemoteGit at ChildProcess.exithandler (child_process.js:272:12) npm WARN addRemoteGit at ChildProcess.emit (events.js:159:13) npm WARN addRemoteGit at maybeClose (internal/child_process.js:943:16) npm WARN addRemoteGit at Process.ChildProcess.handle.onexit (internal/childprocess.js:220:5) npm WARN addRemoteGit killed: false, npm WARN addRemoteGit code: 1, npm WARN addRemoteGit signal: null, npm WARN addRemoteGit cmd: 'git -c core.longpaths=true config --get remote.origin.url' } npm ERR! git clone --template=C:\Users\jim\AppData\Roaming\npm-cache_git-remotes_templates --mirror ://github.com/GeekyAnts/react-native-drawer.git C:\Users\jim\AppData\Roaming\npm-cache_git-remotes\git--github-com-GeekyAnts-react-native-drawer-git-5dbe324d: Cloning into bare repository 'C:\Users\jim\AppData\Roaming\npm-cache_git-remotes\git--github-com-GeekyAnts-react-native-drawer-git-5dbe324d'... npm ERR! git clone --template=C:\Users\jim\AppData\Roaming\npm-cache_git-remotes_templates --mirror ://github.com/GeekyAnts/react-native-drawer.git C:\Users\jim\AppData\Roaming\npm-cache_git-remotes\git--github-com-GeekyAnts-react-native-drawer-git-5dbe324d: fatal: unable to access '://github.com/GeekyAnts/react-native-drawer.git/': error setting certificate verify locations:npm ERR! git clone --template=C:\Users\jim\AppData\Roaming\npm-cache_git-remotes_templates --mirror ://github.com/GeekyAnts/react-native-drawer.git C:\Users\jim\AppData\Roaming\npm-cache_git-remotes\git--github-com-GeekyAnts-react-native-drawer-git-5dbe324d: CAfile: D:/Program Files/Git/mingw64/libexec/ssl/certs/ca-bundle.crt npm ERR! git clone --template=C:\Users\jim\AppData\Roaming\npm-cache_git-remotes_templates --mirror ://github.com/GeekyAnts/react-native-drawer.git C:\Users\jim\AppData\Roaming\npm-cache_git-remotes\git--github-com-GeekyAnts-react-native-drawer-git-5dbe324d: CApath: none npm ERR! git clone --template=C:\Users\jim\AppData\Roaming\npm-cache_git-remotes_templates --mirror ://github.com/GeekyAnts/react-native-keyboard-aware-scroll-view.git C:\Users\jim\AppData\Roaming\npm-cache_git-remotes\git--github-com-GeekyAnts-react-native-keyboard-aware-scroll-view-git-8603b9f3: Cloning into bare repository 'C:\Users\jim\AppData\Roaming\npm-cache_git-remotes\git--github-com-GeekyAnts-react-native-keyboard-aware-scroll-view-git-8603b9f3'... npm ERR! git clone --template=C:\Users\jim\AppData\Roaming\npm-cache_git-remotes_templates --mirror ://github.com/GeekyAnts/react-native-keyboard-aware-scroll-view.git C:\Users\jim\AppData\Roaming\npm-cache_git-remotes\git--github-com-GeekyAnts-react-native-keyboard-aware-scroll-view-git-8603b9f3: fatal: unable to access '://github.com/GeekyAnts/react-native-keyboard-aware-scroll-view.git/': error setting certificate verify locations: npm ERR! git clone --template=C:\Users\jim\AppData\Roaming\npm-cache_git-remotes_templates --mirror ://github.com/GeekyAnts/react-native-keyboard-aware-scroll-view.git C:\Users\jim\AppData\Roaming\npm-cache_git-remotes\git--github-com-GeekyAnts-react-native-keyboard-aware-scroll-view-git-8603b9f3: CAfile: D:/Program Files/Git/mingw64/libexec/ssl/certs/ca-bundle.crt npm ERR! git clone --template=C:\Users\jim\AppData\Roaming\npm-cache_git-remotes_templates --mirror ://github.com/GeekyAnts/react-native-keyboard-aware-scroll-view.git C:\Users\jim\AppData\Roaming\npm-cache_git-remotes\git--github-com-GeekyAnts-react-native-keyboard-aware-scroll-view-git-8603b9f3: CApath: none npm ERR! code 128 npm ERR! Command failed: git -c core.longpaths=true clone --template=C:\Users\jim\AppData\Roaming\npm-cache_git-remotes_templates --mirror ://github.com/GeekyAnts/react-native-drawer.git C:\Users\jim\AppData\Roaming\npm-cache_git-remotes\git--github-com-GeekyAnts-react-native-drawer-git-5dbe324d npm ERR! Cloning into bare repository 'C:\Users\jim\AppData\Roaming\npm-cache_git-remotes\git--github-com-GeekyAnts-react-native-drawer-git-5dbe324d'...npm ERR! fatal: unable to access '://github.com/GeekyAnts/react-native-drawer.git/': error setting certificate verify locations: npm ERR! CAfile: D:/Program Files/Git/mingw64/libexec/ssl/certs/ca-bundle.crt npm ERR! CApath: none npm ERR! npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\jim\AppData\Roaming\npm-cache_logs\2017-12-11T19_31_31_038Z-debug.log 更改为$.get()，那么您在成功回调或模板中必须$.getJSON()将没有要呈现的数据。 （现在很明显，但是当我遇到那种情况时，我花了一些时间。）

相关问题
最新问题