How can I sort or filter my Model

Learning Team
1

I have a user Model and some action in the Controller, but I want to sort the result.

can some one help me out ???

Blockquote indent preformatted text by 4 spaces

export default Controller.extend({

appName: ‘Ember Twiddle User’,

filteredItems: computed(

'filterFirstName',
'filterLastName',
'filterCity',
'filterZipCode',
'filterFisatLevel',
'model.[]',
function() {
return this.model.filter((user) => {
  return (!this.filterFirstName || user.firstName.includes(this.filterFirstName))
    && (!this.filterLastName || user.lastName.includes(this.filterLastName))
    && (!this.filterCity || user.city.includes(this.filterCity))
    && (!this.filterZipCode || user.zipCode.includes(this.filterZipCode))
    && (!this.filterFisatLevel || user.fisatLevel >= this.filterFisatLevel)
    ;
});

}),

pagedItems: computed(‘filteredItems.’, function() {

return this.filteredItems.slice(0, 20);   // number of users

}),

});

indent preformatted text by 4 spaces

Blockquote

how to filter / sort by firstname or last name DESC / ASC ??

2

Well, damn! I’d written a tutorial for sorting in Ember a couple years ago for CodeSchool.com, but now that site is apparently defunct and the article is gone. :frowning_face: The repo for the code still exists, though, if that’s any help: GitHub - zachgarwood/ember-sorting-demo: A follow-along demonstration for Dynamic Sorting in Ember.js

Anyway, Ember has a sort function in @ember/object/computed that you give the name of the property you’d like sorted and a “sort definition.” A sort definition can be a function that you use to manually sort the items in any way you’d like, or the sort definition can be a sort definition property. Let’s focus on the sort definition property.

So, let’s say, for the sake of this example, you want a list of people sorted by first name, ascending, and then last name, descending. And you start out with code that looks like this:

import { sort } from '@ember/object/computed';
import Controller from '@emver/controller';

export default Controller.extend({
  users: alias('model'),
  sortedUsers: null, // TODO: Let's put something here!
});

First, let’s use the sort function: sortedUsers: sort('users', 'usersSortDefinition'),. Now let’s create the usersSortDefinition which is just going to be a list of the properties that we want to sort by: usersSortDefinition: ['firstName', 'lastName'],. So now our sortedUsers property will be a list of users sorted by first name then last name. But what about the sort direction (ascending or descending)? Let’s update the sort definition: usersSortDefinition: ['firstName:asc', 'lastName:desc'].

So now your controller would look something like this:

import { sort } from '@ember/object/computed';
import Controller from '@ember/controller';

export default Controller.extend({
  users: alias('model'),
  sortedUsers: sort('users', 'usersSortDefinition'),
  usersSortDefinition: ['firstName:asc', 'lastName:desc'],
});
2 Likes
3

Oh, hey, I found it: https://web.archive.org/web/20160818215956/https://www.codeschool.com/blog/2016/03/21/dynamic-sorting-in-emberjs OR http://zachgarwood.com/2016/03/21/dynamic-sorting-in-ember-js/

Praise be to the Wayback Machine!

4 Likes
4

Thanks. I have solved the first step. https://github.com/rassloff/ember_frontend