Javascript 如何使用handlebar.js访问JSON对象？

我正在使用Echo Nest API创建一个基本的web应用程序，以习惯于模板化和从API获取数据。我只是想知道如何从JSON对象访问“song”中的“artist_name”和“title”对象，并使用handlebar.js将这些数据插入我的模板中？当我像下面写的那样做{{每首歌}时，它不起作用

提前谢谢

珍妮·特蕾西并不能反映我的音乐品味。这只是我测试它时出现的JSON对象

<main>
  <section>
    <input type="text" id="genre-name" placeholder="Enter the Genre Here." />
    <input type="number" id="bpm" placeholder="Enter the BPM here." id="bpm">
    <a href="#" id="fetch-albums">Fetch</a>
  </section>

  <section id="results">
  </section>

</main>

<template id="results-template">
  <article>
    <header>
      {{#each songs}}
      <h1>{{ this.artist_name }}</h1> {{/each}}
</template>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="handlebars.js"></script>
<script type="text/javascript">
  $('#fetch-albums').on('click', function() {
    var genre = $('#genre-name').val();
    var bpm = $('#bpm').val();
    var source = $('#results-template').html();
    var template = Handlebars.compile(source);
    $.get('http://developer.echonest.com/api/v4/song/search?api_key=[hidden]&style=' + genre + '&min_danceability=0.65&min_tempo=' + bpm + '&results=5', function(data) {
      $('#results').append(template(data));
    });
  });
</script>

您的

和

没有结束标记。虽然HTML规范可能允许一些标记忽略关闭（比如

，afaik），虽然一些浏览器已经足够宽容了，但我不知道Handlebar编译器是否相同

您的

歌曲

仍在

响应中

。我想应该是

{{{每个响应.歌曲}}

。另外，我想你也可以选择

{{artist_name}}

{
  "response": {
    "status": {
      "version": "4.2",
      "code": 0,
      "message": "Success"
    },
    "songs": [{
      "artist_id": "AR8COOH1187B990D7D",
      "id": "SOGMVZZ1393A2A9142",
      "artist_name": "Jeanie Tracy",
      "title": "I'm Gonna Get You"
    }, {
      "artist_id": "AR8COOH1187B990D7D",
      "id": "SOGMIVN14248BD9E88",
      "artist_name": "Jeanie Tracy",
      "title": "Feel Like Dancing [Joey Negro Dubbed Out]"
    }, {
      "artist_id": "AR8COOH1187B990D7D",
      "id": "SOIMUFZ1315CD4CDEC",
      "artist_name": "Jeanie Tracy",
      "title": "Do You Believe In Wonder (Stone & Nick Late Nite Diner Mix)"
    }, {
      "artist_id": "AR8COOH1187B990D7D",
      "id": "SOEQTUW1315CD4FAB2",
      "artist_name": "Jeanie Tracy",
      "title": "Intro"
    }, {
      "artist_id": "AR8COOH1187B990D7D",
      "id": "SOENYBA12A6D4F46C0",
      "artist_name": "Jeanie Tracy",
      "title": "Rosabel's Disco Diva Mix"
    }]
  }
}