Backbone Collection Initialization in View - backbone.js

Question

I'm having a hard time initializing a simple view with a collection that I'm pulling from an API. Everything I try returns an empty array when I try to return the collection from within the view.
app.models.Employee = Backbone.Model.extend({
});
app.collections.Employees = Backbone.Collection.extend({
Model: app.models.Employee,
url: "http://api.sample.com",
initialize: function(){
this.fetch();
},
parse: function(response){
console.log(response)
},
});
app.views.Container = Backbone.View.extend({
el: $('.container'),
initialize: function(){
this.collection = new app.collections.Employees();
console.log(this.collection)
var that = this;
this.collection.fetch({
success: function(){
that.render();
}
});
},
render: function(){
console.log(this.collection) //returns no models
}
});

Answer 1

You have to use parse correctly:
parse: function(response) {
console.log(response);
return response;
} //`,` - remove it at last item in object

Answer 2

There are 3 problems with your code
You are using parse incorrectly. Per the specifications
The function is passed the raw response object, and should return the
array of model attributes to be added to the collection
so yes, as #Sergey suggested
parse: function(response) {
console.log(response);
return response;
}
or better, just remove your parse function, don't override it.
You are calling your fetch function twice.
First time at this line
this.collection = new app.collections.Employees();
which eventually calls this function
initialize: function(){
this.fetch();
},
Second time is inside your initialize function in the View.
3) You break render
Again, same thing as your parse. You are supposed to
renders the view template from model data, and updates this.el with
the new HTML
Something like this
render: function() {
this.$el.html(this.template(this.model.attributes));
return this;
}