Ember Error while processing route: listing Assertion Failed

Question

I have been working to get an Emberjs front end (using Ember Data) to work with my Flask API back end. The adapter appears to be working as the api is called when the 'Listing' route is hit in the browser and I can also inspect the raw object in the network inspector, however in Ember Inspector it shows that there is a model associated, but all of the data is undefined, the route doesn't get loaded (the template doesn't show up, no data) and I continually get this error despite my efforts:

Error while processing route: listing Assertion Failed: You must include an 'id' for listing in an object passed to 'push'

The object I am sending looks like this:

{
 "data": {
   "attributes":{
     "make": "BMW", 
     "model": "640I", 
     "odometer": "11530", 
     "trim": "CPE 640I", 
     "year": "2016"
   }, 
   "id": "1", 
   "type": "listings"
  }
}

Which as far as I have seen is compliant with the json-api formatting that Ember Data needs.

Here is my code for the adapter, serializer, route, and model.

/adapters/application.js

  import DS from 'ember-data';
  export default DS.JSONAPIAdapter.extend({
    host: 'http://localhost:5000',
    namespace: 'PS/api_v1_0'
  });

/serializers/application.js

import DS from 'ember-data';
import Ember from "ember";

export default DS.JSONAPISerializer.extend({
  keyForAttribute: function(key){
    return Ember.String.dasherize(key);
  },
  serializeId: function(id) {
    return id.toString();
  }
});

/serializers/listing.js

import DS from 'ember-data';

export default DS.JSONAPISerializer.extend({

  normalizeFindRecordResponse(store, type, payload){
    return {
      data: {
        attributes: {
          exteriorColor: payload.exterior_color, 
          interiorColor: payload.interior_color,
          make: payload.make,
          mmrPrice: payload.mmr_price,
          model: payload.model,
          odometer: payload.odometer,
          trim: payload.trim,
          year: payload.year,
        },
        id: payload.login,
        type: type.modelName,
      }
    };
  }
});

/models/listing.js

import DS from 'ember-data';

export default DS.Model.extend({
  exteriorColor: DS.attr('string'),
  interiorColor: DS.attr('string'),
  make: DS.attr('string'),
  mmrPrice: DS.attr('string'),
  model: DS.attr('string'),
  odometer: DS.attr('string'),
  trim: DS.attr('string'),
  year: DS.attr('string'),
});

/routes/listing.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
    return this.store.findRecord('listing', '1');
  }
});

I feel like I have tried everything to try and shape the JSON to get serialized by Ember Data but I have hit a wall and cannot find any other related questions - anyone have any idea how to tackle this?

Answer 1

The problem was two-fold: In the serializer I was accessing the wrong variable for the id, payload.login rather than payload['data'].id . Also, I was not indexing into the payload object for the attributes values for the attributes.

My new serializer looks like this:

/serializers/listing.js

import DS from 'ember-data';

export default DS.JSONAPISerializer.extend({
  normalizeFindRecordResponse(store, type, payload){
    //console.log(payload['data']['attributes']);
    return {
      data: {
        attributes: {
          exteriorColor: payload['data']['attributes'].exterior_color, 
          interiorColor: payload['data']['attributes'].interior_color,
          make: payload['data']['attributes'].make,
          mmrPrice: payload['data']['attributes'].mmr_price,
          model: payload['data']['attributes'].model,
          odometer: payload['data']['attributes'].odometer,
          trim: payload['data']['attributes'].trim,
          year: payload['data']['attributes'].year,
        },
        id: payload['data'].id,
        type: type.modelName,
      }
    };
  }
});