Sort Ember Object Array with Promises

Question

I have a model model/person

{

  firstName: DS.attr( 'string'),
  lastName: DS.attr( 'string'),
  email: DS.attr( 'string' ),
}

and another model model/project

{

  name:            DS.attr( 'string' ),
  code:            DS.attr( 'string' ),
  startDate:       DS.attr( 'date' ),
  endDate:         DS.attr( 'date' ),
  users : DS.hasMany('person', {async: true}),

}

then i'm retrieving all the projects with as an array which contains ember objects. since the project -> users is async its a promise. and i want to sort that array using the first name of the person. when the data is arrived accordingly and re render the hbs that is using the list

i have a computed property called

renderProjects = computed ('model.projects.[]')
{
 // trying to sort in here but data is not avaiable so its not getting sorted
}

Answer 1

The solution is simply to use .@each:

renderProjects: computed ('[email protected]', function() {
  return this.users.sortBy('firstName');
})

this will recompute the renderProjects CP whenever the list of projects change or any firstName on any of the projects changes and then automagically update your view.

One important notice: You can not do [email protected]. This is what you did in your twiddle with [email protected].

In your twiddle the easiest fix is to add a computed.alias to the video model:

username: computed.alias('myUser.name'),

Then you can do this:

sortedVideos: computed('[email protected]', function() {
  return this.get('model').sortBy('username');
})

Here is a fixed twiddle.

Answer 2

I would implement an observer, which watches the project array. Inside of the observer I would resolve the users-relationship sort the project array subsequently.

Please check out following code snippet.

  modelObserver: observer('model.[]', function() {
    let userPromises = this.get('model').map(project => project.get('users'));
    RSVP.all(userPromises).then(function() {
      this.set('sortedProjects', this.get('model').sortBy('users.firstObject.name'));
    }.bind(this));
  })