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"
    },
    ...
  ]
}

artych · Accepted Answer · 2015-09-23 10:53:11Z

6

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:

edited Sep 23, 2015 at 10:53

answered Sep 23, 2015 at 10:43

artych

3,6691 gold badge19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oldenborg Over a year ago

Thank you, have been reading the ember docks, but I tend to easily get confused, so I totally missed that the type and attributes parameters weren't just values of the object.

Community · Accepted Answer · 2017-05-23 12:24:51Z

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.

Collectives™ on Stack Overflow

Ember - Cannot read property 'replace' of undefined

My application

Error

Files

JSON response

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

My application

Error

Files

JSON response

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related