Refining Data Presentation: Filtering Displayed Data Based on Parameters using Set Constructor (Part 3) in Your Angular-15 Ionic-7 App
As our app grows and our data sets become larger, it becomes essential to provide efficient ways for users to access and navigate through the information they need. By implementing data filtering based on parameters, we can refine the data presentation and tailor it to the specific needs and preferences of our users.
The Set constructor, a powerful feature of JavaScript, allows us to create collections of unique values. By using it in conjunction with Angular-15 and Ionic-7, we can filter our data based on specific parameters, such as categories, tags, or user preferences.
Throughout this tutorial, we'll guide you through the process of implementing data filtering using the Set constructor. We'll cover topics such as creating filter options, applying filters to the data set, and dynamically updating the displayed data based on user selections.
By the end of this article, you'll have the knowledge and skills to refine the data presentation in your Angular-15 Ionic-7 app, providing users with a personalized and focused experience.
So, are you ready to refine the way your app presents data? Join us in Part 3 of our series as we explore the power of the Set constructor and implement data filtering based on parameters in your Angular-15 Ionic-7 app.
Get ready to refine and impress!
Tutorial
On the modules page, I will create a filter feature that allows students to filter the module list based on the location they select. To begin, I write the logic to create a locations array that will extract all the location values from our modules array and store them to be used to display them in a select UI component. In the tab1.page.ts file, I write the following logic:
...
export class Tab1Page implements OnInit {
...
copyModules: any = []; // will use this for filtering based on location
// create a variable to store the selected location
selectedLocation: string[] = [];
filteredModules: any = this.modules.modules;
// inject module service into the constructor
constructor(
private moduleService: ModuleServiceService,
private modalCtrl: ModalController
) {}
// call the getModuleData() method when the page loads
ngOnInit() {
// call the getModuleData() method
this.getModuleData();
}
getModuleData() {
...
this.copyModules = this.modules.modules; // will use this for filtering based on location
}
get uniqueLocations() {
const locations = Array.from(
new Set(this.copyModules.map((module: Module) => module.location))
);
return locations;
}
// filter modules by module location
filterModulesByLocation(locations: string[]) {...}
}
The above Tab1Page class is a continuation of the one I created earlier for display module data. Here I began by creating a copyModules array which would be a copy of the newModules array I used earlier to loop through and display data on the main module page. This is important and took a while to figure out, because without this copy, I had a bug where if a user selects a location option, not only the module array on module gets filtered, but the list of options within the filter feature also gets reduced to the single location. This didn’t allow the user to select any other location after one was selected.
Once the copyModules array is initiated, I use a getter method called uniqueLocations. A getter is a method that gets the value of a specific property. In this case, the uniqueLocations getter returns an array of unique locations. The code uses the Array.from() method to create a new array from an iterable object. The object in this case is a new Set object that contains all the unique locations from an array of modules called copyModules. The map() method is used to extract the location property from each module object in the array. This method uses the map() method to create a new array of all location names in copyModules, and then the Set object to remove duplicates. Finally, the Array.from() method is used to convert the Set object back to an array. With this, the dropdown list will now only display each location name once, even if it appears multiple times in the newModules array. Finally, the return statement returns the array of unique locations.
Next, I have created the filterModulesByLocation(locations: string[]){} method that takes an array of strings as a parameter.
// filter modules by module location
filterModulesByLocation(locations: string[]) {
if (locations.includes('all') || locations.length === 0) {
this.filteredModules = this.modules.modules;
} else {
this.filteredModules = this.modules.modules.filter((module: Module) => {
return locations.includes(module.location);
});
}
this.newModules = this.filteredModules;
}
The array represents the locations of modules. It filters the modules by their location and assigns the result to two variables: this.filteredModules and this.newModules. The function uses the following logic:
If the array contains the string 'all' as value or is empty, then the function does not filter anything and assigns all the modules to the two variables.
Otherwise, the function uses the filter method to create a new array of modules that match the location criteria. The filter method takes a callback function as an argument, which returns true or false for each module. The callback function checks if the module's location property is included in the array of locations. The function assigns the new array to the two variables.
Once the logic is written, I begin using these variable to display the selection list on tab1.page.html template (in continuation to the previous template to view module data) like this:
<ion-header [translucent]="false">
...
</ion-header>
<ion-content [fullscreen]="true" *ngIf="newModules">
...
<!-- filter drop down from ionic select component -->
<ion-list>
<ion-item lines="none">
<ion-label>Filter</ion-label>
<ion-select
class="ion-margin-top"
label="Filter by Location"
label-placement="floating"
fill="outline"
multiple="true"
aria-label="Filter by Location"
[(ngModel)]="selectedLocation"
(ionChange)="filterModulesByLocation(selectedLocation)"
>
<ion-select-option value="all">All Locations</ion-select-option>
<ion-select-option
*ngFor="let location of uniqueLocations"
[value]="location"
>
{{ location }}
</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
...
</ion-content>
Above, I have used the Ionic Select UI component from ion-select: Select One or Multiple Value Boxes or Placeholders (ionicframework.com) where multiple attributes allows users to select multiple location options. The ionChange event listener tracks when the component changes which triggers the filter method I created earlier. The [(ngModel)] is a two-way data binding syntax that allows me to pass the selectedLocation property to and fro the typescript logic and the template file. Then within the ion-select-option where I’ll have the list of all locations, I have used the *ngFor angular directive to loop through the uniqueLocations array of individual locations, and the [value] property one-way data binding will take in the location property from the TS logic. I have also created a separate option with all locations with a value of ‘all’ to allow users to view all locations’ modules. Finally, the {{ location }} string interpolation will display the location value in the selection options list. Figure 6 and Figure 7 demonstrate how the filter works:
%20_5.png) |
| Figure 6: Filter by location options |
%20_6.png) |
| Figure 7: Modules filtered by location |