Index Cannot read property 'typeKey' of undefined TypeError: Cannot read property 'typeKey' of undefined

Ember Data
1

I am new to ember, trying to load the data from server below is my script, i am getting the index Cannot read property ‘typeKey’ of undefined TypeError: Cannot read property ‘typeKey’ of undefined error any one help me

window.App = Em.Application.create({ LOG_TRANSITIONS: true });

  	App.ApplicationAdapter = DS.RESTAdapter.extend({		 
	  host: 'http://localhost:8080/savp/sample/menu'			
	});
	
  	App.MenuSerializer = DS.RESTSerializer.extend({
  	  keyForAttribute: function(attr) {
  	    return Ember.String.underscore(attr).toUpperCase();
  	  }
  	});
  	
  	App.Menu = DS.Model.extend({
  		parent  : DS.attr() ,    	
    	children: DS.belongsTo('children', {async:true})
  	});
  	
  	App.Children = DS.Model.extend({
  		name  : DS.attr(),
    	isurl : DS.attr(),
    	Url  : DS.attr()
  	});      	
 
    App.IndexRoute = Ember.Route.extend({        	
        model: function(){
        	 return this.store.find('menu');
        }
    });
    App.IndexController = Ember.ArrayController.extend();

    App.IndexView = Ember.View.extend();

Data is some thing like this

{“Menus”:[{id":1,“parent”:“Dashboard”,“children”:{“id”:2,“name”:“Home”,“isurl”:false,“url”:“#”}}]}

2

Your Menu–Children relationship seems off to me. First, it’s typical to use singular model names; Child in this case. Then, it seems more likely to me that the relationship would look like this:

App.Menu = DS.model.extend({
  children: DS.hasMany('child', {async: true})
});

There are many things that could be wrong, though. You haven’t given us enough information to help. You could make a minimal version of your application on JSBin or the like so we can get the full picture, including the template.

3

Sorry if I hijack this, but I have the same error in my model. The thing is I was reading a book and created my model like they did, but I have 2 errors. I’m using ember-cli:

DEBUG: Ember      : 1.7.0
vendor.js:27637 DEBUG: Ember Data : 1.0.0-beta.10
vendor.js:27637 DEBUG: Handlebars : 1.3.0
vendor.js:27637 DEBUG: jQuery     : 1.11.1

I have a category.js in my models folder:

export default DS.Model.extend({
  name: DS.attr('string'),
  img: DS.attr('string'),
  url: DS.attr('string'),
  cnt: DS.attr('number'),
  
  parent_id: DS.belongsTo('category', {
    inverse: 'children'
  }),
//  parent_id: DS.attr('number'),
  
  children: DS.hasMany('category', {
    inverse: 'parent_id'
  }),
//  children: DS.attr(),
  
  hasChildren: function() {
    return this.get('children').get('length') > 0;
  }.property('children').cacheable(),
  
  isLeaf: function() {
    return this.get('children').get('length') === 0;
  }.property('children').cacheable()
});

In my case the category.children is an array of category type objects. If I comment out the children: hasMany and uncomment children: DS.attr() I don’t see the error anymore, but then I get my second error, when I call inside the template:

{{#each category in categories}}
  {{#if category.hasChildren}}

Uncaught TypeError: Cannot read property ‘get’ of undefined.

4

What kind of Ember Data adapter are you using? Can you post a minimal JSBin that demonstrates your problem?

Two suggestions that won’t actually fix your problem:

  1. Calling it parent_id is inaccurate, because it’s actually just the parent.
  2. You could use a computed property for isLeaf, since it’s really just !hasChildren: isLeaf: Ember.computed.not('hasChildren')