Trouble with Handlebars template and Trello API JSON data

Other Questions API
1

Hey everyone! I’m hitting a wall with my Handlebars template. I’m using the Trello.Net wrapper to fetch card data from the Trello API. The search works fine, but I’m getting a weird ‘n is undefined’ error in the Handlebars core file when I try to use {{each}} in my template.

Here’s a snippet of my JSON data:

[
  {
    "CardID": "abc123xyz789",
    "Title": "Example Card",
    "Details": "**Created by user**\n\nSome extra info here",
    "ExtraData": "More stuff"
  },
  // ... more cards ...
]

My Handlebars template looks like this:

<script id="cardTemplate" type="text/x-handlebars-template">
  {{#each}}
  <div class="card-item {{CardID}}">
    <h3>{{Title}}</h3>
  </div>
  {{/each}}
</script>

I’m using jQuery to make an AJAX call to get the data:

$(".find-cards").on("click", function() {
  var query = "John Doe";
  $.ajax({
    type: "POST",
    url: "FindCards.aspx/SearchCards",
    data: JSON.stringify({query: query}),
    contentType: "application/json",
    dataType: "json",
    success: function(response) {
      var cards = JSON.parse(response.d);
      var source = $("#cardTemplate").html();
      var template = Handlebars.compile(source);
      $("#card-list").html(template(cards));
    }
  });
});

For some reason, my template isn’t rendering anything. Any ideas what I’m doing wrong? Thanks for any help!

2

hey mate, i think i see the issue. ur not passing the data correctly to handlebars. try changing ur success callback like this:

success: function(response) {
  var cards = JSON.parse(response.d);
  var source = $("#cardTemplate").html();
  var template = Handlebars.compile(source);
  $("#card-list").html(template({cards: cards}));
}

then in ur template, do {{each cards}} instead of just {{each}}. that should fix it!

3

I’ve encountered similar issues with Handlebars before, and I think I might know what’s going on here. The problem likely stems from how you’re passing the data to the template.

When you use {{each}} without specifying a property, Handlebars expects the context to be an array. However, you’re passing the entire ‘cards’ object to the template. Try modifying your template to iterate over a specific property of your data, like this:

<script id="cardTemplate" type="text/x-handlebars-template">
  {{#each this}}
  <div class="card-item {{CardID}}">
    <h3>{{Title}}</h3>
  </div>
  {{/each}}
</script>

The ‘this’ keyword tells Handlebars to iterate over the current context, which should be your array of cards.

Also, double-check that your JSON.parse(response.d) is actually returning an array. If it’s wrapping your array in another object, you might need to access it differently.

If this doesn’t solve it, try console.logging your ‘cards’ variable to see exactly what structure you’re dealing with. Sometimes the data we think we’re getting isn’t quite what we expect!

4

I’ve run into this issue before, and it’s often due to how the data is structured when passed to Handlebars. The ‘n is undefined’ error typically occurs when Handlebars can’t find the context it’s expecting.

Try modifying your success callback like this:

success: function(response) {
  var cards = JSON.parse(response.d);
  var source = $("#cardTemplate").html();
  var template = Handlebars.compile(source);
  $("#card-list").html(template({cards: cards}));
}

Then update your template to:

{{#each cards}}
<div class=\"card-item {{CardID}}\">
  <h3>{{Title}}</h3>
</div>
{{/each}}

This way, you’re explicitly telling Handlebars what to iterate over. If this doesn’t work, check if response.d is already parsed JSON. If so, remove the JSON.parse step. Hope this helps!