Ember model hooking with data received as JSON with REST

1
votes

I'm really new to ember and I'm trying to send a JSON data with my REST backend (I'm using Django REST framework with Django JSON API), but I'm getting some weird errors.

FIREFOX

Error: 

Error while processing route: sampledata.index data is null _pushInternalModel@http://localhost:4200/assets/vendor.js:76923:11 push@http://localhost:4200/assets/vendor.js:76900:31

and a Warning:

WARNING: Encountered a resource object with type "sampledata", but no model was found for model name "sampledatum" (resolved model name using 'frontend@serializer:application:.modelNameFromPayloadKey("sampledata")).

CHROME

Error:

Error while processing route: sampledata.index Cannot read property 'type' of null TypeError: Cannot read property 'type' of null
at Class._pushInternalModel (http://localhost:4200/assets/vendor.js:76923:27)
at Class.push (http://localhost:4200/assets/vendor.js:76900:36)
at http://localhost:4200/assets/vendor.js:77627:15
at Object.run (http://localhost:4200/assets/vendor.js:10805:25)
at Class._adapterRun (http://localhost:4200/assets/vendor.js:77149:31)
at http://localhost:4200/assets/vendor.js:77624:13
at tryCatch (http://localhost:4200/assets/vendor.js:63933:14)
at invokeCallback (http://localhost:4200/assets/vendor.js:63948:15)
at publish (http://localhost:4200/assets/vendor.js:63916:9)
at http://localhost:4200/assets/vendor.js:42181:7logError @ ember.debug.js:28535error @ ember.debug.js:28478triggerEvent @ ember.debug.js:28594trigger @ ember.debug.js:53473trigger @ ember.debug.js:53287(anonymous function) @ ember.debug.js:53107tryCatch @ ember.debug.js:53806invokeCallback @ ember.debug.js:53821publish @ ember.debug.js:53789publishRejection @ ember.debug.js:53724(anonymous function) @ ember.debug.js:32054invoke @ ember.debug.js:333flush @ ember.debug.js:397flush @ ember.debug.js:205end @ ember.debug.js:560run @ ember.debug.js:682join @ ember.debug.js:702run.join @ ember.debug.js:21181hash.success @ rest.js:910fire @ jquery.js:3187fireWith @ jquery.js:3317done @ jquery.js:8757(anonymous function) @ jquery.js:9123
other error.. TypeError: Cannot read property 'type' of null

My data sent is:

{
    "links": {
        "first": "http://localhost:8000/api/sampledata?page=1",
        "last": "http://localhost:8000/api/sampledata?page=1",
        "next": null,
        "prev": null
    },
    "data": [{
        "type": "sampledata",
        "id": "4",
        "attributes": {
            "blind_id": "1-146788",
            "aliquots_circulation": 9,
            "total_dna": 120,
            "data_type": "WES"
        },
        "relationships": {
            "projects": {
                "data": [],
                "meta": {
                    "count": 0
                }
            }
        }
    }],
    "meta": {
        "pagination": {
            "page": 1,
            "pages": 1,
            "count": 1
        }
    }
}

My ember model (/app/models/sampledata.js):

import DS from 'ember-data';

export default DS.Model.extend({
  blind_ID: DS.attr('string'),
  aliquotsCirculation: DS.attr('number'),
  totalDna: DS.attr('number'),
  dataType: DS.attr('string'),
  projects: DS.hasMany('project')
});

My adapter (/app/adapters/application.js):

import DS from 'ember-data';
import ENV from 'frontend/config/environment';

export default DS.JSONAPIAdapter.extend({
  host: ENV.host,
  namespace: 'api'
});

My serializer (/app/serializers/application.js)

import DS from 'ember-data';

export default DS.JSONAPISerializer.extend({

});

If I change my serializer to

export default DS.RESTSerializer.extend({
  primaryKey: '_id',
  serializeId: function(id) {
    return id.toString();
  }
});

I get the following WARNINGS and NO ERRORS, but no data is shown:

WARNING: Encountered "links" in payload, but no model was found for model name "link" (resolved model name using frontend@serializer:application:.modelNameFromPayloadKey("links"))
vendor.js (line 16826)
WARNING: Encountered "data" in payload, but no model was found for model name "datum" (resolved model name using frontend@serializer:application:.modelNameFromPayloadKey("data"))
2
javascriptjsondjangorestember.js
Are you sure that nowhere in your response you typed sampledatum instead of sampledata? – Lux
Yes. I went over the code anyway and rechecked. – tupan

2 Answers

2
votes

It's a typo. You extend adapter instead serializer.

//(/app/serializers/application.js)

    import DS from 'ember-data';

    export default DS.JSONAPISerializer.extend({

    });

To resolve warning 

WARNING: Encountered a resource object with type "sampledata", but no model was found for model name "sampledatum" (resolved model name using 'frontend@serializer:application:.modelNameFromPayloadKey("sampledata")).

overwrite in serializer like this :

modelNameFromPayloadType(type){
  if(type === 'sampledata') return type;
  return this._super(...arguments);
}
1
votes

Finally after hours I figured it out.

Ember has this thing called Inflector and it was pluralizing my word "data" to "datum". That's why it was not finding my model and that's why changing my model to sample-data.js as suggested did not work.

Reference here: https://guides.emberjs.com/v2.0.0/models/customizing-adapters/#toc_pluralization-customization

Two solutions:

1) Rename the model and templates. Model should be singular, templates in plural

2) Use Ember.Inflector (/app.js)

import Ember from 'ember';
export function initialize(/* container, application */) {
  var inflector = Ember.Inflector.inflector;
  inflector.uncountable('sampledata');
}

export default {
  name: 'inflector',
  initialize: initialize
};