Oldenborg Oldenborg - 1 month ago 15
reST (reStructuredText) Question

Ember - Cannot read property 'replace' of undefined

My application



Im trying to build a fairly simple application using Laravel as a RESTfull API server and Ember as my fontend framework

My backend server lives on
http://api.example.com/1.0/


My frontend lives on
http://www.example.com/


Ive just started this project so I'm only a few hours into the devlopment, so there might be some configuration issues that Im missing here, but anyway.

Im trying to get a list of products from my server and display them in my ember application using ember-data

Im running ember 2.0.2 and ember-data 2.0.0

Im getting the following error in chrome.

Error




Error while processing route: product Cannot read property 'replace'
of undefined TypeError: Cannot read property 'replace' of undefined
at Object.func (http://localhost:4200/assets/vendor.js:45832:15)
at Object.Cache.get (http://localhost:4200/assets/vendor.js:23421:36)
at decamelize (http://localhost:4200/assets/vendor.js:45874:29)
at Object.func (http://localhost:4200/assets/vendor.js:45789:12)
at Object.Cache.get (http://localhost:4200/assets/vendor.js:23421:36)
at Object.dasherize (http://localhost:4200/assets/vendor.js:45878:35)
at ember$data$lib$system$normalize$model$name$$normalizeModelName (http://localhost:4200/assets/vendor.js:66295:27)
at ember$data$lib$serializers$json$serializer$$default.extend.modelNameFromPayloadKey
(http://localhost:4200/assets/vendor.js:75184:67)
at ember$data$lib$serializers$json$serializer$$default.extend._normalizeResourceHelper
(http://localhost:4200/assets/vendor.js:75064:30)
at Array.map (native)


Files



In ember I have generated a product resource giving my the following files.

// app/routes/product.js

import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('product');
}
});


// app/model/product.js

import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr(),
price: DS.attr()
});


JSON response



The Json returned from my api
http://api.example.com/1.0/products



{
"data": [
{
"id": "1",
"name": "dolores",
"price": "59015",
"created_at": "2015-09-06 16:18:13",
"updated_at": "2015-09-06 16:18:13"
},
{
"id": "2",
"name": "debitis",
"price": "57449",
"created_at": "2015-04-07 14:45:16",
"updated_at": "2015-04-07 14:45:16"
},
...
]
}

Answer

This is adapter/serializer error, it's not descriptive though. Payload is wrong for the JSONAPIAdapter (the default adapter)

You should modify payload as:

{
  "data": [
  {
    "id": "1",
    "type": "products",
    "attributes": {
      "name": "dolores",
      "price": "59015",
      "created-at": "2015-09-06 16:18:13",
      "updated-at": "2015-09-06 16:18:13"
    }
  }, {
    "id": "2",
    "type": "products",
    "attributes": {
      "name": "debitis",
      "price": "57449",
      "created-at": "2015-04-07 14:45:16",
      "updated-at": "2015-04-07 14:45:16"
    }
  }]
}    

or use RESTAdapter/Serializer with a such payload:

 {
  "products": [{
    "id": "1",
    "name": "dolores",
    "price": "59015",
    "created_at": "2015-09-06 16:18:13",
    "updated_at": "2015-09-06 16:18:13"
  }, {
    "id": "2",
    "name": "debitis",
    "price": "57449",
    "created_at": "2015-04-07 14:45:16",
    "updated_at": "2015-04-07 14:45:16"
  }]
} 

If you can't change response payload, you have to customize Adapter/Serializer pair. Check related questions on SO.

Links for details:

Comments