Why I'm getting an empty store of records?

Question

I have backend that serve this json

{
  "bars": [
    {
      "id": 1,
      "name": "one bar"
    },
    {
      "id": 2,
      "name": "second bar"
    },
    {
      "id": 3,
      "name": "third bar"
    }
  ]
}

at host: 'http://localhost:3000/bars'

this is all what I have on the client side:

;(function(Ember, DS) {
    var App = Ember.Application.create({
        LOG_TRANSITIONS: true
    });

    window.App= App;

    App.ApplicationAdapter = DS.RESTAdapter.extend({
        host: 'http://localhost:3000'
    });

    App.ApplicationSerializer = DS.JSONSerializer.extend({
        primaryKey: 'id'
    });

    App.Bar = DS.Model.extend({
        name: DS.attr('string')
    });


    App.ApplicationRoute = Ember.Route.extend({
        model: function() {
            var bars = this.store.find('bar');
            bars.then(function(bars) {
                console.log(bars.content.length);  // return 0 where the xhr request getting 3 items
        });
        return bars;
    }
    });

}(Ember, DS));

---

I'm using

Ember      : 1.9.0
Ember Data : 1.0.0-beta.14.1
Handlebars : 2.0.0 
jQuery     : 2.1.1

---

PS : the jquery ajax request seems that it working normally:

 XHR finished loading: GET "http://localhost:3000/bars".

Answer 1

You are using a wrong Serializer

Comment out JSONSerializer and activate ActiveModelSerializer instead and you should be good to go

//     App.ApplicationSerializer = DS.JSONSerializer.extend({
//         primaryKey: 'id'
//     });

App.ApplicationSerializer = DS.ActiveModelSerializer.extend({
    primaryKey: 'id'
});

Working solution here