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

Question

I'm creating a basic web app using the Echo Nest API to get used to templating and fetching data from APIs. I was just wondering how I would access the 'artist_name' & 'title' objects inside 'song' from the JSON object and use Handlebars.js to insert this data inside my template? When I do the {{#each songs}} as I've written below, it doesn't work.

Thanks in advance!

PS. Jeanie Tracy does not reflect my music taste. It's just the JSON object that came up when I was testing it!

<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

1. Your <article> and <header> don't have closing tags. While the HTML specifications may allow some tags to omit closing (like <td> , afaik), and while some browsers are forgiving enough, I don't know if the Handlebars compiler is the same.

2. Your songs is still under response . I think it should be {{#each response.songs}} . Also, I think you can go with {{ artist_name }} too.