Ember Data and JSON API - not populating all the model properties

1

We are implementing a new project against an ASP.NET WebAPI JSON API and for some reason only the Id property is populated on loading and the rest of the model properties remain as undefined.

We are using Ember 1.13.7 at present, but plan to upgrade to 2.0 shortly.

Response from our JSON API:

{
  "data": {
    "id": "1",
    "type": "userDigests",
    "attributes": {
      "entityId": 17,
      "email": null,
      "userName": "System",
      "firstName": "System",
      "lastName": "User",
      "position": null,
      "isActive": true,
      "isLockedOut": false,
      "isSystemUser": true,
      "esisId": 1000001,
      "displayName": "SystemU"
    }
  }
}

Model: //app/models/user-digest import DS from ‘ember-data’;

export default DS.Model.extend({
    entityId: DS.attr('number'),
    email: DS.attr('string'),
    userName: DS.attr('string'),
    firstName: DS.attr('string'),
    lastName: DS.attr('string'),
    isActive : DS.attr('boolean'),
    islockedOut : DS.attr('boolean'),
    isSystemUser : DS.attr('boolean'),
    esisId : DS.attr('number'),
    displayName: DS.attr('string')
});

Adapter config:

//app/application/adapter
import DS from 'ember-data';
import config from '../config/environment';

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

The Request:

Remote Address:[::1]:13408
Request URL:http://localhost:13408/api/user-digests/1
Request Method:GET
Status Code:200 OK
Response Headers
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:4200
Content-Length:254
Content-Type:application/vnd.api+json; charset=utf-8

Using the Ember Inspector we can see that the model was loaded correctly, but the property value are incorrect:

id: 1
entityId: undefined
email: null
userName: undefined
firstName: undefined
etc

Any ideas on what we are doing wrong?

Thanks in advance

2

JSONAPIAdapter supports dasherized attribute name. So you have to write a serializer for camelCase. The code below is my case: I had to write an ApplicationSerializer for snake-cased attributes.

//app/serializers/application.js
import Ember from 'ember';
import DS from 'ember-data';

var underscore = Ember.String.underscore;

export default DS.JSONAPISerializer.extend({
  keyForAttribute(key) {
    return underscore(key);
  },

  keyForRelationship(rawKey) {
    return underscore(rawKey);
  }
});

I hope it helps.

3 Likes
3

@dopin Thank you!

That was exactly the tip we were looking for and the final solution that work for us is as follows (disable the dasherization done by Ember):

export default DS.JSONAPISerializer.extend({
    keyForAttribute: function(attr) {
        return attr;
    }
});
1 Like