Ember - Cannot read property 'replace' of undefined - api

Question

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 1

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:
Guides
JSONAPISerializer payload example
RESTSerializer payload example

Answer 2

The same issue happened to me.
Version details:
DEBUG: -------------------------------
ember.debug.js:DEBUG: Ember : 1.11.0
ember.debug.js:DEBUG: Ember Data : 1.0.0-beta.14.1
ember.debug.js:DEBUG: jQuery : 1.11.1
DEBUG: -------------------------------
Cause of the issue:
It seems that adding attributes to Handlebars elements using inline if helpers also causes the issue (whether the property that you are using on your condition is true, false, null or undefined).
my-component.hbs
<button class="btn btn-solve-my-problems" {{action 'solveIt}} {{if isNotSolvable 'disabled'}}>
Solve my problems!
</button>
my-component.coffee
isNotSolveble: (->
if #get('somethingMeaningful') then true else null
).property('somethingMeaningful')
The solution:
Instead of using the inline if helper, I am just attributing the value of isNotSolvable to the disabled attribute (nothing was changed on the my-component.coffee file).
my-component.hbs
<button class="btn btn-solve-my-problems" {{action 'solveIt}} disabled="{{isNotSolvable}}">
Solve my problems!
</button>
PS.: the null being returned from the method has to do with the manipulation of the disabled attribute. It has nothing to do with the issue reported on this thread. It only reflects my scenario and how I've solved the issue. More details here.