Ember - Cannot read property 'replace' of undefined

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 .