JSON not match with model - json

Question

im try render a html table via ajax with Backbone.js.
The Ajax request works fine, returns the JSON data, but appear the json not match with the model.
Im using, Symfony and Serialize Bundle.
This is my Backbone model and collection:
var Auditoria = Backbone.Model.extend({
defaults:{
id: 'undefined',
user_id: 'undefined',
user_str: 'undefined',
user_agent: 'undefined',
login_from: 'undefined',
login_date: 'undefined'
}
});
var AuditoriaList = Backbone.Collection.extend({
model: Auditoria,
url: $("#ajax-call").val()
});
var sesiones = new AuditoriaList();
sesiones.fetch({
async: false
});
The Ajax response (write on Symfony) do:
public function getSesionesAction(){
$em = $this->getDoctrine()->getManager();
$sesiones_registradas = $em->getRepository('AuditBundle:AuditSession')->findAll();
$serializer = $this->get('jms_serializer');
// Prepara la respuesta
$response = new Response();
$response->setContent($serializer->serialize($sesiones_registradas,'json'));
$response->headers->set('Content-Type', 'text/json');
// Retorna la respuesta
return $response;
}
The JSON data returned is:
[{"id":4,"user_id":1046,"user_str":"Meyra, Ariel
Germ\u00e1n","login_date":"2013-11-11
10:24:12","user_agent":"","login_from":""} ... ]
But in the table, print "undefined" in the cells.
Any ideas ?.
UPDATE
Thanks for replies. The HTML view is the next:
<table id="table-session" class="table table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th># Usuario</th>
<th>Usuario</th>
<th>Navegador</th>
<th>Desde</th>
<th>Fecha</th>
</tr>
</thead>
<tbody id="sessions">
</tbody> </table>
And the render Backnone is:
var AuditoriaView = Backbone.View.extend({
tagName: 'tr',
initialize: function(){
// Cada vez que el modelo cambie, vuelve a renderizar
this.listenTo(this.model, 'change', this.render);
},
render: function(){
this.$el.html("<td>" + this.model.get('id') + "</td>" + "<td>" + this.model.get('user_id') + "</td>"
+ "<td>" + this.model.get('user_str') + "</td>" + "<td>" + this.model.get('user_agent') + "</td>"
+ "<td>" + this.model.get('login_from') + "</td>" + "<td>" + this.model.get('login_date') + "</td>"
);
return this;
}
});
// The main view of the application
var App = Backbone.View.extend({
// Base the view on an existing element
el: $('#table-sessions'),
initialize: function(){
this.list = $('#sessions');
this.listenTo(sesiones, 'change', this.render);
sesiones.each(function(sesion){
var view = new AuditoriaView({ model: sesion });
this.list.append(view.render().el);
}, this);
},
render: function(){
return this;
}
});
new App();

Answer 1

I suspect that the problem is that you are trying to print the model's attributes before they are fetched from the server. Try this:
var App = Backbone.View.extend({
// Base the view on an existing element
el: $('#table-sessions'),
initialize: function(){
this.list = $('#sessions');
this.collection = new AuditoriaList
var that = this;
this.collection.fetch({
success: function(collection) {
collection.each(function(sesion) {
var view = new AuditoriaView({ model: sesion });
that.list.append(view.render().el);
});
}
});
this.listenTo(this.collection, 'change', this.render);
},
render: function(){
return this;
}
});