Ember models table updating by computed filter property

Learning Team
1

Hi all,

Am new to ember . Trying to filter the data in ember side using ember filter(computed property). I have used ember model table data to display it. The code loads the model and displays well at first go.when i try to filter it , it says no records to show. my code: controller: users: alias(‘model’), currentFilter: null,

filteredPeople: filter('users', function(user) {
  alert(this.get('currentFilter'));
  if(this.get('currentFilter') === null) {
    return true;
  } else {
    return user.isActive === this.get('currentFilter');
  }
}).property('users', 'currentFilter'),

actions: {
   
  filterUpdated: function (value) {
    
    alert(value);
    if (value=== null) {
      this.set('currentFilter', null);
    }
    else {
      this.set('currentFilter', value);
    }
  }

the .hbs code:

Show: 
{{models-table data=filteredPeople columns=columns showColumnsDropdown=false useNumericPagination=true filteringIgnoreCase=true showPageSize=true
selectedItems=selectedItems

multipleSelect=true customIcons=customIcons }}

any idea what is happening ? ( when i give the current filter as true or false on the first go it gives correct display)

2

I don’t think that’s going to dynamically depend on currentFilter.

Try like this:

import { computed } from '@ember/object';
...
filteredUsers: computed('users.@each.isActive', 'currentFilter', function() {
  if (this.currentFilter == null) {
    return this.users;
  } else {
    return this.users.filter(user => user.isActive === this.currentFilter);
  }
})

(The above code assumes you’re using Ember 3.1, the current release. In prior versions you would still have to use this.get where I’m doing direct property access.)

The 'users.@each.active' dependent key says that filteredUsers will need to be recomputed if any of the users’s isActive fields changes (that implicitly also means it will cover the case where users are added or removed from the list too).

1 Like
3

Thanks for the prompt reply.

I tried your code getting the following error: “Assertion Failed: You attempted to access users.isDescriptor (on <(unknown mixin):ember313>), but users is a computed property.↵ ↵Due to certain internal implementation details of Ember, the users property previously contained a private “descriptor” object, therefore users.isDescriptor would have been true.↵↵ This implementation detail has now changed and the “descriptor” object is no longer present at this location. Soon, accessing users on this object will return the computed property’s current value (see RFC #281 for more details).↵↵ If you are seeing this error, you are likely using an addon that relies on this now-defunct private implementation detail. If you can, identify the addon from the stack trace below and report this bug to the addon authors. If you feel stuck, the Ember Community Slack (https://ember-community-slackin.herokuapp.com/) may be able to offer some help.↵↵ If you are an addon author and need help transitioning your code, please get in touch in the #dev-ember channel in the Ember Community Slack.”

4

I’m guessing you’re on Ember 2.x then? Try replacing all the this.foos and user.foos with this.get('foo') and get(user, 'foo'). Make sure you import get at the top of the file with import { get } from '@ember/object';.

1 Like
5

Hi am using ember cli 3.0

6

Yeah, 3.0 still needs the gets like:

import { computed } from '@ember/object';
...
filteredUsers: computed('users.@each.isActive', 'currentFilter', function() {
  if (this.get('currentFilter') == null) {
    return this.get('users');
  } else {
    return this.get('users').filter(user => user.isActive === this.get('currentFilter'));
  }
})
7

(Also, watch out for the difference between your ember-cli version and your ember-source version. When people say “you need ember 3.1”, they mean ember-source , not ember-cli. By default you’ll have the same version of both, but you’re not required to.)

8

Hi , sorry , the source version is also ember 3. I checked and changed the code to this.get and the error is gone . But the behavior is same as the previous code used. Do you think anything to do with addon? whether the addon is not getting updated ?

9

I’m not familiar with that addon. You could try temporarily replacing models-table with

{{#each filteredPeople as |person|}}
  <div>Person {{person.id}}</div>
{{/each}}

to rule out problems with the addon.

10

hi ef4,

I checked . Its nothing to do with addon . Thanks for your prompt help. Both the code worked, the change is that the isActive field requires boolean value but we are inputting the string value, so i just added the following line to change string to boolean and it worked, var isActiveS = (this.get(‘currentFilter’) == ‘true’);