Handlebars syntax issue with JSON from Trello API

Question

Struggling with my Handlebars syntax for JSON data when returned from the Trello.Net wrapper for the Trello API. I'm doing a card search for some string which returns cards. This part works well. However, wrapping my Handlebars HTML with {{#each}} throws a 'n is undefined' error in the handlebars core file.

Here's my JSON:

"[ 
    { "Id": "519a423c4bedcac656000a84", 
      "Name": "sdvsdv", 
      "Desc": "**Submitted by me**\r\n\r\nsdvsdvsdvsdv", 
      "Other keys": "Other values",
 }, 
    { "Id": "519a423c4bedcac656000a84", 
      "Name": "sdvsdv", 
      "Desc": "**Submitted by me**\r\n\r\nsdvsdvsdvsdv", 
      "Other keys": "Other values",
 }.. and so on 
]"

Here's my (stripped down) Handlebars template:

 <script id="resultsTemplate" type="text/x-handlebars-template">
    {{#each}}
    <div class="result {{Id}}">
        <h3>{{Name}}</h3>
    </div>
    {{/each}}
</script>

and my Ajax call:

 $(".search-btn").click(function () {
         var data = 'David Orriell';
         $.ajax({
             type: "POST",
             url: "SearchYourCards.aspx/GetCards",
             data: "{'data': '" + data + "'}",
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             success: function (msg) {
                 var res = $.parseJSON(msg.d);
                 var source = $('#resultsTemplate').html();
                 var template = Handlebars.compile(source);
                 var context = res;
                 $('#results').html(template(context));
                 //$('#results').accordion({ header: ".result h3" });
             }
         });
     });

My HTML template is always empty. Any ideas?

Thanks, Brett

Answer 1

You should check your error console. Then you should tell {{#each}} what you want to iterate over:

{{#each this}}
    <!-- ... -->
{{/each}}

Demo: http://jsfiddle.net/ambiguous/vcQdf/