javascript - 如何使用 Handlebars.js 访问 JSON 对象？

Question

我正在使用 Echo Nest API 创建一个基本的 Web 应用程序，以习惯从 API 进行模板化和获取数据。我只是想知道如何从 JSON 对象访问“歌曲”内的“artist_name”和“title”对象，并使用 Handlebars.js 将此数据插入我的模板中？当我按照下面写的那样执行 {{#eachongs}} 时，它不起作用。

提前致谢!

PS。 Jeanie Tracy 不符合我的音乐品味。这只是我测试时出现的 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>

JSON 对象

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

Answer 1

1. 您的<article>和<header>没有结束标签。虽然 HTML 规范可能允许某些标记省略结束符(例如 <td> ，afaik)，并且虽然某些浏览器足够宽容，但我不知道 Handlebars 编译器是否相同。

2. 您的songs仍在response下。我觉得应该是{{#each response.songs}} 。另外，我认为你可以选择 {{ artist_name }}也是。