Question

我正在使用Echo Nest API创建一个基本的Web应用程序，以便用于模板化和从API获取数据。我只是想知道如何访问'artist_name'和amp;来自JSON对象的'song'中的'title'对象，并使用Handlebars.js将这些数据插入到我的模板中？当我按照下面的说明进行{{#each songs}}时，它不起作用。

提前致谢！

PS。珍妮特蕾西并不反映我的音乐品味。它只是我测试它时出现的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 OBJECT

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

您的<article>和<header>没有结束标记。虽然HTML规范可能允许某些标签省略关闭（如<td>，afaik），虽然有些浏览器足够宽容，但我不知道Handlebars编译器是否相同。
您的songs仍在response下。我认为它应该是{{#each response.songs}}。另外，我认为你也可以使用{{ artist_name }}。

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

1 个答案: