ember js : #each display sub object content

Question

I have section as a belongTo in "sectionfeed" model. I want to print the content of the section in #each something like below. Its not working.

How to print the content of sub object using #each in ember js

Template

{{#each sectionfeed in model.sectionfeeds}}
                        <tr>
                                <td> {{#link-to 'section' sectionfeed.section}}{{sectionfeed.id}}{{/link-to}} </td>
                                <td> {{sectionfeed.section.name}} </td> <-- Not getting printed
                                <td> {{fromNow sectionfeed.section.modifiedAt}} </td>
                                <td> {{fromNow sectionfeed.section.updatedAt}} </td>
                                <td> {{fromNow sectionfeed.section.liverpooledAt}} </td>
                            <td>
                                <button class="btn btn-primary btn-sm" {{action 'remove_section_feed' sectionfeed}}>Remove</button>
                            </td>
                        </tr>
                    {{ else }}
                        <tr>
                            <td colspan="5">
                                No Section found.
                            </td>
                        </tr>
                    {{/each}}

response from endpoint

{"sectionfeed":{"id":"c9eb3c84-424c-4437-d9fa-1499373a8309","createdAt":1417225274651,"modifiedAt":1417225274651,"sectionDefinitionID":"0358b97a-b9ae-4c67-987d-03afffa4655e","feedDefinitionID":"0b8f8dd5-2b15-4fbc-9a49-bd91dfa62750","section":{"id":"0358b97a-b9ae-4c67-987d-03afffa4655e","createdAt":1416672390865,"modifiedAt":1417295499501,"appleTouchIconURL":null,"tintColor":null,"fontColor":null,"coverImageURL":null,"name":"Section to Feed Association Test ","channelDefinitionID":"7fd619e5-7633-4a5e-8c05-94d42c65945d","icon":null,"liverpooledAt":1417295499501,"sortOrder":0.0}},"meta":{}}

sectionfeed model

    /*global Ember*/
Backoffice.Sectionfeed = DS.Model.extend({
    sectionDefinitionID: DS.attr('string'),
    sections:DS.belongsTo('section', {async: false}),
    feedDefinitionID: DS.attr('string')
});
DS.RESTAdapter.reopen({
    ajaxOptions: function(url, type, hash) {
        hash = hash || {};
        if (type === 'PUT') {
            hash.data = hash.data || {};
            hash.data['_method'] = type;
            type = 'DELETE';
        }
        return this._super(url, type, hash);
    }
});

section model

/*global Ember*/
Backoffice.Section = DS.Model.extend({
    // Section
    name: DS.attr('string'),
    icon: DS.attr('string'),
    channelDefinitionID: DS.attr('string'),
    liverpooledAt: DS.attr('date'),

    // DataModel
    createdAt: DS.attr('date'),
    modifiedAt: DS.attr('date'),

    // Cover Item
    appleTouchIconURL: DS.attr('string'),
    coverImageURL: DS.attr('string'),
    tintColor: DS.attr('string'),
    tintColorStyle: function () {
        return 'background-color:' + this.get("tintColor") + ';';
    }.property('tintColor'),
    fontColor: DS.attr('string'),
    fontColorStyle: function () {
        return 'color:' + this.get("fontColor") + ';';
    }.property('fontColor')
});

// probably should be mixed-in...
Backoffice.Section.reopen({
    attributes: function () {
        var model = this;
        return Ember.keys(this.get('data')).map(function (key) {
            return Em.Object.create({ model: model, key: key, valueBinding: 'model.' + key });
        });
    }.property()
});

NicholasJohn16 NicholasJohn16 · Accepted Answer · 2014-11-30T05:03:35

Ember-Data expects related items to be in a seperate object in the response. You need to implement the embeded records mixin for this to work. ( http://emberjs.com/api/data/classes/DS.EmbeddedRecordsMixin.html)

ember js : #each display sub object content

1 Answers