Angular offers a range of search filters for optimizing search results

Question

Angular offers a range of search filters for optimizing search results

The system currently has 3 search fields: 1. Name.... 2. Subject.... 3.Price....
Each of these filters works independently - when searching by name, only results matching that name are displayed; similarly for subject and price.

However, the challenge lies in enabling all filters to work together i.e. finding a person named "BOB" who teaches "English" at a price range of "500-600". How can we establish this connection between multiple filters? https://i.sstatic.net/CV8ji.png

In the component.ts file:
filterSearch is an array containing all user data, while tempFilterSearch is used for displaying it in HTML

searchSubject($event) {
    this.subject = $event.target.value;
    if(this.price == null){
        this.tempFilterSearch = this.filterSearch.filter((res) => {         
            return (                    
                res.subject1.toLocaleLowerCase().match(this.subject.toLocaleLowerCase()) ||
                res.subject2.toLocaleLowerCase().match(this.subject.toLocaleLowerCase()) ||
                res.subject3.toLocaleLowerCase().match(this.subject.toLocaleLowerCase())
                );
            });
    }else if(this.price != null){
        this.tempFilterSearch = this.filterSearch.filter((res)=>{
            console.log(res);
            if((Number(res.price1))>=(Number(this.lowerValue))
                &&(Number(res.price1))<=(Number(this.higherValue)) 
                &&(res.subject1.match(this.subject)) || (res.subject2.match(this.subject))|| (res.subject3.match(this.subject))){
                    return res.subject1 || res.subject2 || res.subject3;
            }
        })
    }

searchName() {  
    this.tempFilterSearch = this.filterSearch.filter((response)=>{
        return response.fullName.toLocaleLowerCase().match(this.name.toLocaleLowerCase());
    })
    
}

searchPrice($event) {
    this.price = $event.target.value.split("-");
    this.lowerValue = this.price[0];
    this.higherValue = this.price[1];
    if (this.subject == null) {
        this.tempFilterSearch = this.filterSearch.filter((res) => {
            if((Number(res.price1))>=(Number(this.lowerValue))&&(Number(res.price1))<=(Number(this.higherValue)))
                return res.price1.toLocaleLowerCase();
            });
    }else if(this.subject != null){
        this.tempFilterSearch = this.filterSearch.filter((res)=>{
            if((Number(res.price1))>=(Number(this.lowerValue))
                &&(Number(res.price1))<=(Number(this.higherValue)) ){
                    return res.price1.toLocaleLowerCase();
            }
        })
    }
}

In the component.html file:

 <div class="tutorWrapper" *ngFor="let element of tempFilterSearch">

I am seeking a solution to enable all filters to work simultaneously.

javascript angular typescript

Answer 1

Answer №1

The sample code provided demonstrates the application of separate filters on a fresh this.filterSearch. This means that each time a new filtering process begins, it resets the previously filtered results and starts afresh.

To optimize this functionality, it is recommended to consolidate all filters into a single logic in order to apply them collectively on the same array, resulting in only one output array. Any changes made to the filters will then trigger a re-iteration starting from the original array, applying all filters sequentially.

As outlined below:

searchSubject($event) {
    this.subject = $event.target.value;
    this.applyFilters();
}

searchName() {  
    //this.name is already assigned 
    this.applyFilters();    
}

searchPrice($event) {
    this.price = $event.target.value.split("-");
    this.lowerValue = this.price[0];
    this.higherValue = this.price[1];
    this.applyFilters();
}

applyFilters() {
    let temp = this.filterSearch;

    // Implementing Subject filter
    if(this.price == null){
        temp = temp.filter((res) => {           
            return (                    
                res.subject1.toLocaleLowerCase().match(this.subject.toLocaleLowerCase()) ||
                res.subject2.toLocaleLowerCase().match(this.subject.toLocaleLowerCase()) ||
                res.subject3.toLocaleLowerCase().match(this.subject.toLocaleLowerCase())
                );
            });
    }else if(this.price != null){
        temp = temp.filter((res)=>{
            if((Number(res.price1))>=(Number(this.lowerValue))
                &&(Number(res.price1)<=(Number(this.higherValue)) 
                &&(res.subject1.match(this.subject)) || (res.subject2.match(this.subject) || (res.subject3.match(this.subject))){
                    return res.subject1 || res.subject2 || res.subject3;
            }
        })
    }

    // Implementing Name filter
    temp = temp.filter((response)=>{
        return response.fullName.toLocaleLowerCase().match(this.name.toLocaleLowerCase());
    })

    // Implementing Price filter
    if (this.subject == null) {
        temp = temp.filter((res) => {
            if((Number(res.price1)>=(Number(this.lowerValue))&&(Number(res.price1)<=(Number(this.higherValue))))
                return res.price1.toLocaleLowerCase();
            });
    }else if(this.subject != null){
        temp = temp.filter((res)=>{
            if((Number(res.price1)>=(Number(this.lowerValue))
                &&(Number(res.price1)<=(Number(this.higherValue)) ){
                    return res.price1.toLocaleLowerCase();
            }
        })
    }

    this.tempFilterSearch = temp;
}

Note: The individual filter functions remain unaltered; this modification simply consolidates and organizes your existing code into a unified function for enhanced efficiency.

Answer 2

The sample code provided demonstrates the application of separate filters on a fresh this.filterSearch. This means that each time a new filtering process begins, it resets the previously filtered results and starts afresh.

To optimize this functionality, it is recommended to consolidate all filters into a single logic in order to apply them collectively on the same array, resulting in only one output array. Any changes made to the filters will then trigger a re-iteration starting from the original array, applying all filters sequentially.

As outlined below:

searchSubject($event) {
    this.subject = $event.target.value;
    this.applyFilters();
}

searchName() {  
    //this.name is already assigned 
    this.applyFilters();    
}

searchPrice($event) {
    this.price = $event.target.value.split("-");
    this.lowerValue = this.price[0];
    this.higherValue = this.price[1];
    this.applyFilters();
}

applyFilters() {
    let temp = this.filterSearch;

    // Implementing Subject filter
    if(this.price == null){
        temp = temp.filter((res) => {           
            return (                    
                res.subject1.toLocaleLowerCase().match(this.subject.toLocaleLowerCase()) ||
                res.subject2.toLocaleLowerCase().match(this.subject.toLocaleLowerCase()) ||
                res.subject3.toLocaleLowerCase().match(this.subject.toLocaleLowerCase())
                );
            });
    }else if(this.price != null){
        temp = temp.filter((res)=>{
            if((Number(res.price1))>=(Number(this.lowerValue))
                &&(Number(res.price1)<=(Number(this.higherValue)) 
                &&(res.subject1.match(this.subject)) || (res.subject2.match(this.subject) || (res.subject3.match(this.subject))){
                    return res.subject1 || res.subject2 || res.subject3;
            }
        })
    }

    // Implementing Name filter
    temp = temp.filter((response)=>{
        return response.fullName.toLocaleLowerCase().match(this.name.toLocaleLowerCase());
    })

    // Implementing Price filter
    if (this.subject == null) {
        temp = temp.filter((res) => {
            if((Number(res.price1)>=(Number(this.lowerValue))&&(Number(res.price1)<=(Number(this.higherValue))))
                return res.price1.toLocaleLowerCase();
            });
    }else if(this.subject != null){
        temp = temp.filter((res)=>{
            if((Number(res.price1)>=(Number(this.lowerValue))
                &&(Number(res.price1)<=(Number(this.higherValue)) ){
                    return res.price1.toLocaleLowerCase();
            }
        })
    }

    this.tempFilterSearch = temp;
}

Note: The individual filter functions remain unaltered; this modification simply consolidates and organizes your existing code into a unified function for enhanced efficiency.

Answer 3

Answer №2

I'm responding to this on my phone, so if this answer isn't satisfactory, I'll edit it later on my PC.

My approach would be to create functions for all three possible filters: name, subject, and price. Then, I would have a variable that holds an array of the filtered objects.

For the first filter (name), the function would take the main list array and return all matching elements into the filtered variable.

The subject filter would further filter the filtered variable for subjects, and the output would be reassigned back into the filtered array. The same process applies to the price filter.

Finally, you can iterate through the filtered array using ngfor.

!!EDIT!!

In response to your inquiry about solving the already filtered array issue, here is some pseudo code:

mainArray = [...arrayItems];

filteredArray: Items[];


onFilterButtonPressed(name, subject, price) {

 // You can use an 'if' statement to skip any filter where a value hasn't been provided
  nameFilter();
  subjectFilter();
  priceFilter();
}

nameFilter(name){
  filteredArray = mainArray.filter(item => item.name === name)
}

subjectFilter(subject){
  filteredArray = filteredArray.filter(item => item.subject === subject)
}

priceFilter(price){
  filteredArray = filteredArray.filter(item => item.price === price)
}

<button (click)="onFilterButtonPressed(pass your filter values here)">Click to Filter</button

The above code may seem messy and requires the 'name' variable to exist. To address this, we can use a piping function utilizing reduce() to apply our filters.

// Create a function using reduce, applying each subsequent filter function to the current array
function pipe(...fns) {
  return (arg) => fns.reduce((prev, fn) => fn(prev), arg);
}
// Call the function with our filter functions as arguments
// Our filter functions must filter and return the filtered array, also handling cases where the filter doesn't exist by returning the array unchanged
filteredArray =  pipe(nameFilter, subjectFilter, priceFilter)(MainArray)

I hope this explanation helps!

Answer 4

I'm responding to this on my phone, so if this answer isn't satisfactory, I'll edit it later on my PC.

My approach would be to create functions for all three possible filters: name, subject, and price. Then, I would have a variable that holds an array of the filtered objects.

For the first filter (name), the function would take the main list array and return all matching elements into the filtered variable.

The subject filter would further filter the filtered variable for subjects, and the output would be reassigned back into the filtered array. The same process applies to the price filter.

Finally, you can iterate through the filtered array using ngfor.

!!EDIT!!

In response to your inquiry about solving the already filtered array issue, here is some pseudo code:

mainArray = [...arrayItems];

filteredArray: Items[];


onFilterButtonPressed(name, subject, price) {

 // You can use an 'if' statement to skip any filter where a value hasn't been provided
  nameFilter();
  subjectFilter();
  priceFilter();
}

nameFilter(name){
  filteredArray = mainArray.filter(item => item.name === name)
}

subjectFilter(subject){
  filteredArray = filteredArray.filter(item => item.subject === subject)
}

priceFilter(price){
  filteredArray = filteredArray.filter(item => item.price === price)
}

<button (click)="onFilterButtonPressed(pass your filter values here)">Click to Filter</button

The above code may seem messy and requires the 'name' variable to exist. To address this, we can use a piping function utilizing reduce() to apply our filters.

// Create a function using reduce, applying each subsequent filter function to the current array
function pipe(...fns) {
  return (arg) => fns.reduce((prev, fn) => fn(prev), arg);
}
// Call the function with our filter functions as arguments
// Our filter functions must filter and return the filtered array, also handling cases where the filter doesn't exist by returning the array unchanged
filteredArray =  pipe(nameFilter, subjectFilter, priceFilter)(MainArray)

I hope this explanation helps!

Angular offers a range of search filters for optimizing search results

Answer №1

Answer №2

Similar questions

Cloud Firestore query error in Firebase Cloud Function despite data being present in Cloud Firestore

Creating a TypeScript type that supports a flexible number of generic parameters

Tips for fixing TypeScript compiler error TS2339: Issue with accessing 'errorValue' property in Angular 5 project

Guide on utilizing getelementsbytagname for retrieving LI values

Creating typed props is important when utilizing the Material UI makeStyles function

Is it possible to access the passed arguments in the test description using jest-each?

Restrict dropping items in HTML5 by only allowing the drop if the target div is

Using Props with jQuery in React Components: A Comprehensive Guide

Building an array of objects using a foreach loop

Analyzing past UTC date times results in a peculiar shift in time zones

Exploring the world of child routing in Angular 17

Error Encountered in Jhipster Application During Initial Launch

Troubleshooting image loading issues when updating the base URL in an Angular JS project

Adapt appearance according to the length of the text

It can be frustrating to have to refresh the page twice in order to see changes when utilizing the revalidate feature in Next

I'm new to this, but can someone explain why I'm being redirected to the register_db.php page when I click on the register button?

Click to open a Swipeable Drawer using an onClick event handler in Material UI

The functionality of the document download button using Express.js and node.js appears to be malfunctioning

Issue with formik onchange event not filling data in Material UI TEXTFIELD component

Is it possible to create a single directive that can handle both Structural and Attribute behaviors?