CODEWITHSUNDEEP
ember.jsember-data
blazed
blazed

Reputation: 98

EmberJS nested route model

I'm using EmberJS 1.13.3, EmberData 1.13.4, active-model-adapter 1.13.3 and I'm trying to load some model data from the store. The parent route makes the call to the API and works as expected, but the child route calls the API but returns with the following error:

Cannot read property '_internalModel' of undefined TypeError: Cannot read property '_internalModel' of undefined

My code looks like this:

File: routes/user.js

import Ember from 'ember';

export default Ember.Route.extend({
  titleToken: function() {
    return 'Profile';
  },

  model: function(params) {
    return Ember.RSVP.hash({
      user: this.store.findRecord('user', params.username)
    });
  },

  setupController: function(controller, models) {
    this._super(controller, models);
    controller.setProperties(models);
  }
});

File: routes/user/posts.js

import Ember from 'ember';

export default Ember.Route.extend({
  titleToken: function() {
    return 'Posts';
  },

  model: function() {
    return Ember.RSVP.hash({
      posts: this.store.findRecord('post', 'my_username')
    });
  },

  setupController: function(controller, models) {
    controller.setProperties(models);
  }
});

The JSON response for both looks the following:

User route:

{
  "user": {
    "id":"1",
    "username":"my_username",
    "first_name":"John",
    "last_name":"Doe",
    "post_ids":[1, 2]
  }
}

Posts route:

{
  "posts":[
    { "id": 1, "author": "John Doe", "text": "My post", "username": "my_username", "user_id": 1 },
    { "id": 2, "author": "John Doe", "text": "My post2", "username": "my_username", "user_id": 1 }
  ]
}

And the code for router.js

Router.map(function() {

  this.route('user', { path: '/:username' }, function() {
    this.route('posts');
  });

  this.route('login');
});

Upvotes: 4

Views: 2051

Answers (4)

jos
jos

Reputation: 1070

In my case the server wasn't returning the root element. So, for an user server was returning:

{name: name, surname: surname}

instead

user: {name: name, surname: surname}

Upvotes: 0

Leooo
Leooo

Reputation: 21

I had the same error, and I managed to isolate the correct line of code causing the problem by looking at the "Promises" tab in Ember Inspector, searching only in rejecting promises, and one of them had the fulfillment / rejection value "TypeError: Cannot read property '_internalModel' of undefined". The label of the promise gave me the operation, model and id of the record failing. https://github.com/emberjs/ember.js/issues/11863#issuecomment-123898242

In my case, I was returning {} from the server as a response to a findRecord method.

Upvotes: 0

Matt Jensen
Matt Jensen

Reputation: 1564

This error occurs when you pass something other than an ID to find or findRecord methods. Not a very helpful error message I must say.

Anyway you can read some documentation on this here: http://emberjs.com/blog/2015/06/18/ember-data-1-13-released.html#toc_simplified-find-methods

Upvotes: 2

Pedro
Pedro

Reputation: 449

I had the same error. In my case the problem was that my fixtures were inconsistent, as shown in the example below:

GET /sports

[{id: 1, name: 'Sport A'}, {id:2, name: 'Sport B'}]

GET /sports/1
{id: 1, name: 'Sport C'}

Upvotes: 1

Related Questions