Handlebars.js를 사용하여 JSON 객체에 어떻게 액세스합니까?

Question

Echo Nest API를 사용하여 API에서 데이터를 템플릿으로 작성하고 가져 오는 데 익숙해지는 기본 웹 앱을 만들고 있습니다. JSON 개체에서 'artist_name'& 'title'개체에 'song'액세스하고 Handlebars.js를 사용하여 내 서식 파일에이 데이터를 삽입하는 방법에 대해 궁금한가요? 아래에 작성한대로 {{# 개곡}} 할 때 작동하지 않습니다.

미리 감사드립니다.

추신. 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 }}도 함께 갈 수 있다고 생각합니다.