Replace Ember.ArrayController.create() will not resolve belongTo relationships | ember upgrade 3.x

Question

I'm in the process of upgrading and I'm facing issues because ArrayController is being deprecated.

In my old Ember 1.13 route I'm using

model/announcement.js

export default DS.Model.extend( {


  id:DS.attr('string'),
  title: DS.attr( 'string' ),
  description: DS.attr( 'string' ),
  published: DS.attr( 'boolean' ),
  publishedAt: DS.attr( 'date' ),

  course: DS.belongsTo( 'course' ),
  author: DS.belongsTo( 'profile', { async: true } ),

  viewed: false,
  isNew: true,

}

serializer/announcement.js

import DS from 'ember-data';
import ApplicationSerializer from 'mim/serializers/application';

export default ApplicationSerializer.extend( DS.EmbeddedRecordsMixin, {

  keyForRelationship: function( key ) {

    return key !== 'author' ? key : 'id';
  }
} );

routes/announcement.js

 setupController: function( controller, model ) {

    this._super( ...arguments );

     var announcements = Ember.ArrayController.create( {

          model: model,
          sortProperties: [ 'publishedAt' ],
          sortAscending: false
        } );

        controller.set( 'model', announcements );
  },

In the controller of the route announcement, follows:

controller/announcement.js

publishedAnnouncements: Ember.computed( 'model.[]', 'model.@each.published', 'model.@each.viewed', function() {

    var published = this.get( 'model' ).filterBy( 'published', true ),
        announcements = Ember.A();

    announcements.pushObjects( published.filterBy( 'viewed', false ) );
    announcements.pushObjects( published.filterBy( 'viewed' ) );

    return announcements;
  } ),

so in the template im running a for each loop to render all announcements like

templates/announcements.hbs

  {{#each publishedAnnouncements as |announcement|}}
        {{announcement.author.firstName}}
      {{/each}}

After the ember upgrade 3.5 I have changed these to the following:

model/announcement.js

export default DS.Model.extend( {

  id:DS.attr('string'),
  title: DS.attr( 'string' ),
  description: DS.attr( 'string' ),
  published: DS.attr( 'boolean' ),
  publishedAt: DS.attr( 'date' ),

  course: DS.belongsTo( 'course' ),

// remove async true from profile

  author: DS.belongsTo( 'profile'),

  viewed: false,
  isNew: true,

}

serializer/announcement.js

import DS from 'ember-data';
import ApplicationSerializer from 'mim/serializers/application';

export default ApplicationSerializer.extend( DS.EmbeddedRecordsMixin, {

  keyForRelationship: function( key ) {

    return key !== 'author' ? key : 'id';
  }
} );

routes/announcement.js

setupController: function( controller, model ) {

    this._super( ...arguments );

     //removed arrayController from here and assigned model

        controller.set( 'model', model );
  },

controller/announcement.js

sortProperties: ['publishedAt:desc'], sortedModel: computed.sort('model', 'sortProperties'),

publishedAnnouncements: Ember.computed( 'model.[]', 'model.@each.published', 'model.@each.viewed', function() {

   //getting model by local computed property defined above.arrayController sort is doing with above method by sortPropteries 
   var published =this.get('sortedModel').filterBy( 'published', true);
        announcements = Ember.A();

    announcements.pushObjects( published.filterBy( 'viewed', false ) );
    announcements.pushObjects( published.filterBy( 'viewed' ) );

    return announcements;
  } ),

templates/announcements.hbs

  {{#each publishedAnnouncements as |announcement|}}
        {{announcement.author.firstName}}
      {{/each}}

Then the announcement.author.firstname is undefined in ember 3.5 but if it is not a belongsTo relationship it will be there (example announcement.publishedAt)

I have no clue what I missed or what I did wrong here.

I am attaching a screenshot here of a console log which I did in the controller published variable.

Ember 1.13

Ember 3.5

your answers make me better understand the problem. the api returns a custom version of data thats why embeddedRecordsMixin used this is the api payload for course

{
  "courses": [{
    "created_at": "2016-11-22T09:37:53+00:00",
    "updated_at": "2016-11-22T09:37:53+00:00",
    "students": ["01", "02"],
    "coordinators": ["001", "002"],
    "programme_id": 1,
    "announcements": [{
      "created_at": "2016-11-23T08:27:31+00:00",
      "updated_at": "2016-11-23T08:27:31+00:00",
      "course_id": 099,
      "id": 33,
      "title": "test announcement",
      "description": "please ignore",
      "published_at": "2016-11-23T08:27:31+00:00",
      "published": true
    }, {
      "created_at": "2016-11-25T07:13:18+00:00",
      "updated_at": "2016-11-25T07:13:18+00:00",
      "course_id": 04,
      "id": 22,
      "title": "test before ",
      "description": "test",
      "published_at": "2016-11-25T07:13:18+00:00",
      "published": true
    }]
}

Does your API return JSON API compliant JSON? https://jsonapi.org/ — Jan Werkhoven, Nov 12 '18 at 06:16
What's `keyForRelationship` in the announcement serialiser needed for? That seems out of place. — Jan Werkhoven, Nov 12 '18 at 06:19
It's quite unusual to be using `setupController`. If you follow the naming conventions, it should be obsolete. — Jan Werkhoven, Nov 12 '18 at 06:21
cause api doesn't give author key so there is a map to profile where announcement's id is the key of profile — Thilina Dinith Fonseka, Nov 12 '18 at 06:21
@JanWerkhoven with api response im getting for announcement this course_id: 665 created_at: "2016-03-17T15:58:53+00:00" description: "testing" id: 32 published: true published_at: "2016-03-17T15:58:53+00:00" title: "2nd set 2nd test" updated_at: "2016-03-17T15:58:53+00:00" — Thilina Dinith Fonseka, Nov 12 '18 at 06:25
If you open the data tab in Ember inspector, did the author populate the store? — Jan Werkhoven, Nov 12 '18 at 06:30
actually the announcement data is coming as follow programme has courses course has announcements announcement has profiles ( this profile is mapped with author using belongsTo ) — Thilina Dinith Fonseka, Nov 12 '18 at 06:34

Jan Werkhoven · Accepted Answer · 2018-11-12T06:52:47.177

1

Where to start debugging:

Have a look at what your API returns:

Spin up your local Ember app and API.
Open localhost:4200 in Chrome.
Open the network tab in dev tools.
Refresh the page to trigger the network request I assume is in your route's model() hook.
Look at the JSON returned by your API. Is it JSON API compliant?
Open the data tab in Ember Inspector.
After the request occurred, did the author you are expecting to see populate the store?
If yes, does he have firstName or is it undefined?

If all positive, then we can probably rule out issues with the request, API and serialisers.

Seeing this serializer:

// app/serializers/announcments.js

import DS from 'ember-data';
import ApplicationSerializer from 'mim/serializers/application';

export default ApplicationSerializer.extend( DS.EmbeddedRecordsMixin, {
  keyForRelationship: function( key ) {
    return key !== 'author' ? key : 'id';
  }
} );

The mixin EmbeddedRecordsMixin implies your API returns embedded data which is quite uncommon for JSON API compliant responses. This is the only serializer you will need if all according this spec:

// app/serializers/application.js

import JSONAPISerializer from 'ember-data/serializers/json-api';

export default JSONAPISerializer.extend({});

The data coming from your API should be looking like:

{
  "data": [{
    "type": "announcement",
    "id": "1",
    "attributes": {
      "message": "...",
    },
    "relationships": {
      "author": {
        "data": { "type": "profile", "id": "9" }
      },
    }
  }],
  "included": [{
    "type": "profile",
    "id": "9",
    "attributes": {
      "firstName": "John",
      "lastName": "Johnson"
    },
  }]
}

edited Nov 12 '18 at 06:52

answered Nov 12 '18 at 06:28

Jan Werkhoven

2,656
1
22
31

let me tell you the relationships actually the announcement data is coming as follow -> 'programme has courses. course has announcements. announcement has profiles ( this profile is mapped with author using belongsTo ) .' 5. yes its JSON API compliant but in announcement api doenst give author details cause its mapped using profile 7. there is no author cause im using author as profile in store – Thilina Dinith Fonseka Nov 12 '18 at 06:38
1

Have you opened [Ember Inspector](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi?hl=en) and looked at the Data tab? Did the profile of the author successfully load into the store? – Jan Werkhoven Nov 12 '18 at 06:43
you are correct its not loaded. profile store doesn't have that authors profile – Thilina Dinith Fonseka Nov 12 '18 at 06:49
so it means the issue is in the announcement model right ? where it get the connection to the profile ? did i use keyForRelationship in wrong way ? this worked in ember 1.13 – Thilina Dinith Fonseka Nov 12 '18 at 06:52
1

So the issue is most likely the serializers. These are responsible for interpreting the JSON the API sent and then populates the Ember Data store. If this is done well, then you will see this in Ember Inspector. Given that we do not see data there, have a look at the JSON your API sent back. Do this by opening the network tab of Chrome dev tools, find the request and open the preview tab. – Jan Werkhoven Nov 12 '18 at 06:56
im using custom payload from api which is defined in {ActiveModelSerializer} from 'active-model-adapter' – Thilina Dinith Fonseka Nov 12 '18 at 07:38
1

i was missing the author entity from backend api and after fixing that it worked perfectly. thanks for your help and time to resolve this issue. much appreciated ! – Thilina Dinith Fonseka Nov 27 '18 at 03:18

Jan Werkhoven · Answer 2 · 2018-11-14T08:56:38.053

Ember is designed to be back-end agnostic. With the serialisers you can convert all JSON from incoming server responses to suit the Ember Data store. Similarily you use adapters to convert outgoing server requests to suit your back-end.

I recommend reading this doc:

https://guides.emberjs.com/release/models/customizing-serializers/

Then choose from:

Replace Ember.ArrayController.create() will not resolve belongTo relationships | ember upgrade 3.x

2 Answers2

Linked