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
}

Lux · Accepted Answer · 2018-11-22T18:04:58.547

3

The solution is simply to use .@each:

renderProjects: computed ('model.projects.@each.firstName', 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 .@each.foo.bar. This is what you did in your twiddle with model.@each.myUser.name.

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('model.@each.username', function() {
  return this.get('model').sortBy('username');
})

Here is a fixed twiddle.

edited Nov 22 '18 at 18:04

answered Nov 22 '18 at 10:20

Lux

17,835
5
43
73

Your solution was my first attempt, but it doesn't work. Please check out https://ember-twiddle.com/310f41de6940c5bb6624abbf6b1fd2f5?openFiles=templates.videos.index.hbs%2C&route=%2Fvideos Maybe you can fix it – wuarmin Nov 22 '18 at 10:39
I would be happy to find such a pleasant solution. – wuarmin Nov 22 '18 at 10:49
Thanks @Lux for the answer ! this also worked for me ! – Thilina Dinith Fonseka Nov 26 '18 at 07:36

wuarmin · Answer 2 · 2018-11-22T08:18:22.717

0

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));
  })

edited Nov 22 '18 at 08:18

answered Nov 22 '18 at 08:10

wuarmin

3,274
3
18
31

thank you for the quick response ! happy to say that it worked. i was not clear how to use promise array on that. using this example it resolved. Thank you again :) – Thilina Dinith Fonseka Nov 22 '18 at 10:02
1

this is a *really bad* idea! you should *never* use observers to set ember state. Usually there are *very few* reasons to use observers over CPs. – Lux Nov 22 '18 at 10:21
1

@Thilina Dinith Fonseka. Please checkout Lux's answer. His solution is how it should be in ember, much better. Please unaccept this answer. – wuarmin Nov 23 '18 at 07:34
@asdf thank you. i accepted your answer cause it worked for me. i will try lux answer as well. – Thilina Dinith Fonseka Nov 26 '18 at 07:36

Sort Ember Object Array with Promises

2 Answers2

Linked