ember-data error while loading route: TypeError {}

Question

I recently started to implement the ember data library into my project but now everything is broken, the google chrome console provides me with these errors:

- Error while loading route: TypeError {} 
- Uncaught TypeError: Cannot read property 'id' of undefined 
- Port: Could not establish connection. Receiving end does not exist.

The URL I'm trying to open is: /#/track/85

This is the relevant code:

Shoutzor = Ember.Application.create();
Shoutzor.ApplicationAdapter = DS.RESTAdapter.extend({
    namespace: '/api/emberstore',
    host: 'http://www.shoutzor.nl'
});

var attr = DS.attr,
    hasMany = DS.hasMany,
    belongsTo = DS.belongsTo;

Shoutzor.Track = DS.Model.extend({
    id: attr('number'),
    title: attr('string'),
    //length: attr('number'),
    //artist: hasMany('artist'),
    //album: hasMany('album'),

    /* Convert the length in seconds to a string like '01:55' */
    convertedLength: function() {
        var sec_num = parseInt(this.get('length'), 10); // don't forget the second parm
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if (hours   < 10 && hours > 0) {hours   = "0"+hours;}
        if (minutes < 10 && minutes > 0) {minutes = "0"+minutes;}
        if (seconds < 10) {seconds = "0"+seconds;}
        var time    = ((hours != 0) ? hours + ':' : '') + ((minutes != 0) ? minutes +':' : '') + seconds;

        return time;
    }.property('length')
});

Shoutzor.Album = DS.Model.extend({
    id: attr('number'),
    artist: belongsTo('artist'),
    title: attr('string'),
    cover: attr('string')
});

Shoutzor.Artist = DS.Model.extend({
    id: attr('number'),
    name: attr('string'),
    profileimage: attr('string')
});

Shoutzor.Router.map(function() {
    //Track Page
    this.route("track", { path: "/track/:id" });
});

Shoutzor.TrackRoute = Ember.Route.extend({
    setupController: function(controller) {
        controller.set('pageTitle', "Track");
    },

    renderTemplate: function() {
        this.render('TrackContent', { outlet: 'pageContent', into: 'application' });
    },

    model: function(params) {
        return this.store.find('track', params.id);
    }
});

Shoutzor.TrackController = Ember.Controller.extend();

Shoutzor.TrackView = Ember.View.extend();

My API provides a response like:

{"tracks":{"id":85,"title":"Untitled","file":{"filename":"Lines of Latitude - You want it (Free Download).mp3","filepath":"\/home\/vhosts\/domains\/shoutzor\/music\/Lines of Latitude - You want it (Free Download).mp3","crc":"51ca8346","length":262,"id3":[]},"artist":[],"album":[]}}

I have been looking at multiple SO posts and google search results but none of those solve my problem (or I'm looking for the wrong thing),

Any help is greatly appreciated!

Answer 1

You don't need to include id: DS.attr() in your model class. Also, the response for a singular resource should have the root key track instead of tracks :

{"track":{"id":85,"title":"Untitled","file":{"filename":"Lines of Latitude - You want it (Free Download).mp3","filepath":"\/home\/vhosts\/domains\/shoutzor\/music\/Lines of Latitude - You want it (Free Download).mp3","crc":"51ca8346","length":262,"id3":[]},"artist":[],"album":[]}}`