Ember Model Object created but not showing in template

Question

I am working on a soundCloud json for the favorites songs from an user.

This is the json file

I successfully access to the favorites and user properties.

This is my model function

model: function(params) {
    var artist, favoriteListProxy, self;
    self = this;
    artist = params.artist;
    this.controllerFor('application').set('artistName', artist);
    favoriteListProxy = Ember.ArrayProxy.create({
        content: []
    });
    return new Ember.RSVP.Promise(function(resolve, reject) {
        return SC.get("/users/" + 'mannaio' + "/favorites", {
            limit: 40
        }, function(favorites) {
            if (favorites.length) {
                favorites.forEach(function(item, index, arr) {
                    var favorite;
                    favorite = self.createFavoritelist(item, favoriteListProxy);
                    return self.createUser(item.user, favorite);
                });
                favorites = favoriteListProxy.get('content');
                return resolve(favorites);
            }
        });
    });
},

createFavoritelist: function(favorite, arr) {
    var record;
    record = this.store.createRecord('favorite', {});
    record.setProperties({
        id: favorite.id,
        title: favorite.title,
        artwork_url: favorite.artwork_url,
        genre: favorite.genre,
    });
    arr.pushObject(record);
    return record;
},

createUser: function(user, arr) {
    var record;
    record = this.store.createRecord('user', {});
    record.setProperties({
        id: user.id,
        username: user.username,
    });
    arr.pushObject(record);
    return record;
},

As you can see i can create my favorite and user model with the properties, see the console

Then in my template there is my issue where i can show all the favorite properties (title and genre) but not my user.username

<section class="streaming__favorites">
    {{#each favorite in sortedFavorites}}
            <article class="streaming__favorites__song">
                <span>{{favorite.title}}</span>
                <span>{{favorite.genre}}</span>
                <span>{{user.username}}</span>
            </article>
    {{/each}}
</section>



sortProperties: ['created_at:desc'],
sortedFavorites: Ember.computed.sort('model', 'sortProperties')

What am i doing wroing in the template to not show the user.username model property? what's my problem?

Answer 1

First off user isn't anywhere in scope there. Your model hook only returns a list of favorites.

Secondly, I'm not sure how this method is working, I believe it should be crashing:

createUser: function(user, arr) {
    var record;
    record = this.store.createRecord('user', {});
    record.setProperties({
        id: user.id,
        username: user.username,
    });
    // arr here is the favorite record, not an array, how is this
    // not crashing?
    arr.pushObject(record);
    return record;
},

Thirdly, your promise has a good chance of not resolving, since one of the code paths doesn't resolve, your ui would be stuck waiting forever.

You'll need to modify what you are returning from the model hook to both include the user and the favorite, or something along those lines. I'm not sure how your data models look like, so I'm just going to tack it right onto the favorite, fix it as you please. I also am unaware of what SC.get is, so I'll keep it close to what you've shown, but it looks like it might be overkill.

Probably something like this:

model: function(params) {
    var artist, favoriteList, self, ret;
    self = this;
    artist = params.artist;
    ret = [];
    this.controllerFor('application').set('artistName', artist);

    return new Ember.RSVP.Promise(function(resolve, reject) {
        return SC.get("/users/" + 'mannaio' + "/favorites", {
            limit: 40
        }, function(favorites) {
            if (favorites.length) {
                favorites.forEach(function(item, index, arr) {
                    var favorite;
                    favorite = self.createFavoritelist(item);
                    ret.push(favorite);
                    favorite.user = self.createUser(item.user);
                });
            }
            resolve(ret);
        });
    });
},

createFavoritelist: function(favorite) {
    return this.store.createRecord('favorite', {
        id: favorite.id,
        title: favorite.title,
        artwork_url: favorite.artwork_url,
        genre: favorite.genre,
    });
},

createUser: function(user) {
    return this.store.createRecord('user', {
        id: user.id,
        username: user.username,
    });
},

Then your template would be this

<section class="streaming__favorites">
    {{#each favorite in sortedFavorites}}
            <article class="streaming__favorites__song">
                <span>{{favorite.title}}</span>
                <span>{{favorite.genre}}</span>
                <span>{{favorite.user.username}}</span>
            </article>
    {{/each}}
</section>