Angular - How to filter (search) data from multiple properties of data (fields)?

Question

I'm getting my data through API. I want to create filtering and searching on the data. I've created a pipe and it has the following code:

File: text-search.pipe.ts

transform(items: any[], searchText: string): any {
    if (!items) return [];

    if (!searchText) return items;
    console.log("ITEMS ARE",items);
    searchText = searchText.toLowerCase();


    return items.filter(it => {
        return it.hospital_name.toLowerCase().includes(searchText);
    });

  }

My component.html file is as follows:

The input field //User can search by name

 <input type="text" [(ngModel)]="searchText" class="form-control" placeholder="Search">

And then the pipe is applied to:

 <div class="col-lg-3 col-md-4 col-sm-6" *ngFor="let hospital of hospital_list | hospitalSearch: searchText; let i = index;">

Question: If I have another input field or several other fields such as City Field where the user can search through City, Specialization etc as well?

For e.g. :

 <input type="text" [(ngModel)]="searchCity" class="form-control" placeholder="Search">

So how do I modify the existing pipe? Or would I have to create a new pipe.

Things I've tried: In pipe.ts file:

transform(items: any[], searchText: string, searchCity?: string): any {
    if (!items) return [];

    if (!searchText) return items;
    console.log("ITEMS ARE",items);
    searchText = searchText.toLowerCase();

    if (!searchCity) return items;
    console.log("ITEMS ARE",items);
    searchCity= searchCity.toLowerCase();


    return items.filter(it => {
        return it.hospital_name.toLowerCase().includes(searchText);
        return it.hospital_city.toLowerCase().includes(searchCity);

    });

It doesn't work since the 2nd return statement is un-reachable. I have tried to read the API I didn't find any support. Kindly guide me how to add multiple field search filtering to the data I'm getting. Thank You. }

This isn't related to answering your question, but I think your short-circuits are incorrect in your final pipe implementation. You'll likely only want to return items if both of the search terms are falsy. — Ian MacDonald
– Ian MacDonald, Commented Dec 11, 2018 at 15:56

Ian MacDonald · Accepted Answer · 2018-12-11 15:53:52Z

1

Use a boolean operator here. You will need to choose which one is most appropriate for your particular filtering use case.

Filter items that match at least one of:

return items.filter(it => {
    return it.hospital_name.toLowerCase().includes(searchText)
        || it.hospital_city.toLowerCase().includes(searchCity);
});

Filter items that match all:

return items.filter(it => {
    return it.hospital_name.toLowerCase().includes(searchText)
        && it.hospital_city.toLowerCase().includes(searchCity);
});

To invoke your pipe with multiple arguments, use another :.

*ngFor="let hospital of hospital_list | hospitalSearch: searchText:searchCity"

edited Dec 11, 2018 at 15:53

answered Dec 11, 2018 at 15:21

Ian MacDonald

14.1k2 gold badges33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

String Name Over a year ago

Thank you but how do I include my 2nd variable: searchCity in html where I've applied the pipe on ngFor loop: <div class="col-lg-3" *ngFor="let hospital of hospital_list | hospitalSearch: searchText; let i = index;">

Arijit Bag Over a year ago

Works like a charm. Thank you. Upvote

Collectives™ on Stack Overflow

Angular - How to filter (search) data from multiple properties of data (fields)?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related