Displaying, Looping, Searching, and Filtering Data Chapter 2
Filtering our content
Now we have control over our people rows and some filter controls in our view, we need to
make our filters work. We are already filtering by our isActive key, so the radio buttons
will be the first to be wired up. We already have the value in a Boolean form for both the
radio buttons values and the key we will be filtering by. For this filter to work, we need to
compare the isActive key with the radio button's value.
If the filterUserState value is true, show users where isActive is true
If the filterUserState value is false, however, only show users where their
isActive value is false as well
This can be written in one line by comparing the two variables:
filterRow(person) {
return (this.filterUserState === person.isActive);
}
On page load, no users will be shown as the filterUserState key is set to neither true
nor false. Clicking one of the radio buttons will reveal the corresponding users.
Let's make the filter work only if the active user option is selected in the dropdown:
filterRow(person) {
let result = true;
if(this.filterField === 'isActive') {
result = this.filterUserState === person.isActive;
}
return result;
}
This code sets a variable to true as a default. We can then return the variable immediately
and our row will show. Before returning, however, it checks the value of the select box and
if is the desired value, will then filter by our radio buttons. As our select box is bound to the
filterField value, as with the filterUserState variable, it updates while we interact
with the app. Try selecting the Active user option in the select box and changing the radio
buttons.