如何在 Ionic v5 中搜索和过滤数组？

Question

currently I'm trying to filter and search an array in Ionic v5. But I don't know how to combine these two criteria.

I have a page (room-overview), which displays all objects of a room-array. I get these objects from a "data service", which reads a JSON file.

Part of the room-overview.ts-file:

ionViewDidEnter() {
    this.setSearchedItems('');

    this.searchControl.valueChanges
      .pipe(debounceTime(300))
      .subscribe(search => {
        this.searching = false;
        this.setSearchedItems(search);
      });
  }

  onSearchInput() {
    this.searching = true;
  }

  setSearchedItems(searchTerm) {
    this.rooms = this.dataService.searchItems(searchTerm);
  }

On the room-overview page, there is a search bar, which can be used to search the individual objects. This search bar calls the onSearchInput()-method.

<ion-searchbar [formControl]="searchControl (ionChange)="onSearchInput()">

For that, I have a filter/search-service that gives me all objects which fits the search term. "items" is an array of all room-objects.

  searchItems(searchTerm) {
    return this.items.filter(item => {
      return item.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
    });
  }

Besides the search, it should be possible to filter by certain criteria (for example, whether a room is in a certain building or not). This filter possibility is solved via a modal page that passes the values to the room-overview page when it will be closed.

Either the search or the filtering can be done individually, but I do not know how to combine both. I think the "searchItem()"-method should not only filter on the room-object array. It should be able to filter before and use only the filtered array.

I hope someone can help me:-)

Answer 1

Perhaps something like this?

  searchAndFilterItems(searchTerm) {
        const filteredItems = this.items.filter(item => {
            // Apply filters
        });
        return filteredItems.filter(item => {
          return filteredItems.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
        });
      }