ember-data not loading using ember-cli

Question

I'm getting an error where ember-data fails to load the data to the local storage in the web browser. I know it queries the server correctly as it gives me a 200 response and while I was debugging it - $E actually stores the staff (my model) properly but then after a couple of emberJS processes, it fails in converting it to ember-data and storing to local database (web browser).

I've made sure that my adapters, serializers, models and routers make sense. Here is what I have on my adapters, serializers, models, etc.

adapter - application.js:

export default DS.RESTAdapter.extend({
      addTrailingSlashes: false,
      namespace: 'api',
});

serializer - staff.js:

import DRFSerializer from 'ember-django-adapter/serializers/drf';

export default DRFSerializer.extend({
});

routes - staffs.js:

import Ember from 'ember';

export default Ember.Route.extend({
    model: function(){
        return this.store.find('staff');
    }
});

And lastly my model - staff.js

import DS from 'ember-data';

export default DS.Model.extend({
    //inherited properties gotten from Members.model
    userName: DS.attr('string'),
    userFirstName: DS.attr(),
    userLastName: DS.attr() //not sure if this needs to be included
     ....
});

And if any of you are curious, this is what the server returns to my ember:

{
    "staffs": [
        {
            "id": 1,
            "userName": "macmania",
            "userFirstName": "macmania",
            "userLastName": "macmania",
            "emailAddress": "macmania"
        },
        {
            "id": 2,
            "userName": "macmania123",
            "userFirstName": "macmania123 ",
            "userLastName": "macmania123",
            "emailAddress": "[email protected]"
        },
        {
            "id": 3,
            "userName": "macmania123123123",
            "userFirstName": "macmania123123",
            "userLastName": "Smith",
            "emailAddress": "[email protected]"
        },
        {
            "id": 4,
            "userName": "macmania123",
            "userFirstName": "Jolie",
            "userLastName": "Claire",
            "emailAddress": "[email protected]"
        }
    ]
}

Check pluralization. Ember has hard-wired rules. It may think that the plural of "staff" is "staff", preventing it from recognizing the root key "staff". You may need to add your own pluralization rule. — user663031
@torazaburo, can you point me in how to include .configure? I'm using ember cli and I'm not sure how to do the configuration with export default DS.RESTAdapter.extend({..}) and pluralizations. Thanks! — macmania314
@torazaburo, after looking at it further. I don't think it's the pluralization. I ran the command ember generate resource staffs and it gave me staff.js for the models. — macmania314

macmania314 macmania314 · Accepted Answer · 2015-07-13T16:27:53

This is going to be a 'bad' answer since I don't know what the cause was.

After debugging, painstakingly going through step by step of how ember loads the data from the server to ember-data as well as monitoring the promises and making sure my adapter was working properly, I figured out that during the middle of processing it - it wasn't connecting it to the model for some reason.

After trying out a couple of 'tricks' that did not work, [I've changed it a couple of times to tweak it and I don't remember the changes but they didn't work]. What did work was changing the ember-data beta 18 to 1.13.5 as well as ember from 1.12 to 1.13.3, deleting dist, node_modules and bower_install then doing a fresh npm & bower install as well as ember build. The data from the server is now loaded to the local storage.

ember-data not loading using ember-cli

1 Answers