Upon receiving the following JSON data, the view and HTML code successfully renders the values on the webpage.
JSON DATA
[{"id":"1234","name":"book1","type":"catg1"},{"id":"1235","name":"book2","type":"catg1"},
{"id":"1236","name":"book3","type":"catg1"},
{"id":"1237","name":"book4","type":"catg1"},
{"id":"1238","name":"book5","type":"catg1"}]
Collection and Model
var books= Backbone.Collection.extend({
url: '/books'
});
var Book= Backbone.Model.extend({
urlRoot: '/books'
});
VIEW
var bookListView = Backbone.View.extend({
el: '.page',
render: function () {
var that = this;
var books= new Books();
books.fetch({
success: function (banks) {
var template = _.template($('#book-list-template').html(), {books: books.models});
that.$el.html(template);
}
})
}
});
HTML rendered using the above Template
<% _.each(books, function(book) { %>
<tr>
<td><%= htmlEncode(book.get('id')) %></td>
<td><%= htmlEncode(book.get('name')) %></td>
<td><%= htmlEncode(book.get('type')) %></td>
<% }); %>
However, I attempted various methods to achieve the same result with the following JSON response but encountered failures. Can someone provide guidance on what logic adjustments should be made if the JSON DATA is in the following format
{"book":[{"id":"1234","name":"book1","type":"catg1"},
{"id":"1235","name":"book2","type":"catg1"},
{"id":"1236","name":"book3","type":"catg1"},
{"id":"1237","name":"book4","type":"catg1"},
{"id":"1238","name":"book5","type":"catg1"}]}