Backbone.js & Handlebars.js with RESTful API - rest

Question

I am trying to use Backbone.js with Handlebars.js to consume and display a custome JSON API.
Data is definitely being consumed and and added into the Collection.
The template renders but the table has no data in it (one completely empty row).
How would I go about debugging this?
Router
'showStatement': function() {
new app.StatementView({collection: new app.StatementCollection()});
}
Collection
app.StatementCollection = Backbone.Collection.extend({
model: app.Transaction,
url: 'http://localhost/api/public/out/123456/statement',
initialize: function() {
console.log('Init app.StatementCollection');
}
});
Model
app.Transaction = Backbone.Model.extend({
/*
defaults: {
vendor: 'Unknown',
amount: 'Unknown',
currency: 'Unknown',
date: 'Unknown'
}
*/
});
View
app.StatementView = Backbone.View.extend({
el: '#page',
template: Handlebars.getTemplate( 'account_statement' ),
initialize: function() {
console.info(this.collection);
this.render();
this.listenTo(this.collection, 'add', this.render);
this.listenTo(this.collection, 'reset', this.render);
this.collection.fetch();
},
// render library by rendering each book in its collection
render: function() {
this.$el.html( this.template( JSON.stringify(this.collection.toJSON())) ); // <------ pretty sure the problem lies here?!?
console.log('col', JSON.stringify(this.collection.toJSON()) ); // <------ the output from this is shown at the bottom
return this;
}
});
Handlebars Template
{{#if statement}}
<h1>Your Statement</h1>
<table border="1">
<thead>
<th>Date</th>
<th>Name</th>
<th>Amount</th>
</thead>
<tbody>
{{#each statement}}
{{debug}}
<tr>
<td>{{this.vendor}}</td>
<td>{{currency this.currency}}{{this.amount}}</td>
<td><time class="format-date" datetime="{{this.date}}">{{this.date}}<time></td>
</tr>
{{/each}}
</tbody>
</table>
{{else}}
<p class="warning">Sorry, nothing to show.</p>
{{/if}}
This is what my API's JSON looks like:
{"status":true,"result":[{"id":1,"vendor":"Jessops","amount":595.99,"currency":"GBP","date":"2012-11-01 04:57:04"},{"id":2,"vendor":"Starbucks","amount":6.99,"currency":"GBP","date":"2012-11-02 04:57:04"},{"id":3,"vendor":"Superdry","amount":155.99,"currency":"GBP","date":"2012-11-03 04:57:04"},{"id":6,"vendor":"Reebok Outlet","amount":205.99,"currency":"USD","date":"2012-11-05 04:57:04"}]}
Output from console.log('col', JSON.stringify(this.collection.toJSON()) );
col [{"status":true,"result":[{"id":1,"vendor":"Jessops","amount":595.99,"currency":"GBP","date":"2012-11-01 04:57:04"},{"id":2,"vendor":"Starbucks","amount":6.99,"currency":"GBP","date":"2012-11-02 04:57:04"},{"id":3,"vendor":"Superdry","amount":155.99,"currency":"GBP","date":"2012-11-03 04:57:04"},{"id":6,"vendor":"Reebok Outlet","amount":205.99,"currency":"USD","date":"2012-11-05 04:57:04"}]}]
EDIT:
I have now found that changing my render function to the following works:
render: function() {
data = this.collection.toJSON();
this.$el.html(this.template( {statement: data[0]} ));
return this;
}
This suggests that my JSON output is wrong. How can I improve my JSON to reduce the need for the [0]?

Answer 1

It looks like your API returns some 'meta' information (the status : true part) along with the data about the collection, and that your real data lives in the result array. I think Backbone is assuming that your data is just a single item, and it putting it into an array since it is being fed into a collection object. That's why you're needing to use data[0] to pull the first item out of that array.
I think you'd either want o modify your json so that the array currently returned in result is the top level element. Of you'd need to find a way to tell Backbone that your data lives in the result element, not at the top level.