What is the best way to use form input to filter an Observable?

Question

What is the best way to use form input to filter an Observable?

Within my component, I have declared the variable "countries$":

countries$!: Observable<Country[]>;

To populate this variable with data from this API, I use the following code in the "ngOnInit" lifecycle hook:

ngOnInit(){
    this.countries$ = this.apiService.getAllCountries();
}

In order to display the data in the HTML template, I utilize the following syntax:

<div>
  <app-country-card *ngFor="let country of countries$ | async" [country]="country"></app-country-card>
</div>

I aim to add a search feature that dynamically filters the list based on user input.

Initially, I attempted to implement this functionality using the "filter" function within a pipe as shown below:

searchFilterCountries(searchTerm: string){
    this.countries$.pipe(filter((country: any) => 
      country.name.common.toLowerCase().includes(searchTerm.toLowerCase())))
}

The corresponding input field is incorporated into the HTML template like so:

<input type="text" class="form-control" (input)="searchFilterCountries($event.target.value)"/>

Unfortunately, this approach did not yield the desired outcome and triggered TypeScript errors:

Object is possibly 'null'.ngtsc(2531)

Property 'value' does not exist on type 'EventTarget'.ngtsc(2339)

Subsequently, I referenced a filtered list example using Material UI at the following link:

https://material.angular.io/components/autocomplete/examples (The FILTER one)

My attempt to replicate this resulted in the following code snippet:

export class HomeComponent {
    countries$!: Observable<Country[]>;
    myControl = new FormControl('');
    constructor(private apiService: ApiService) { }
    
    ngOnInit(){
        this.countries$ = this.apiService.getAllCountries();
    }

    private _filter(value: string): Observable<Country[]> {
        const filterValue = value.toLowerCase();
    
        return this.countries$.pipe(filter(option => 
          option.name.common.toLowerCase().includes(filterValue)));
    }
}

However, I encountered issues due to dealing with observables instead of the actual data inside them.

An error was detected under the "name" property within "option.name.common", stating:

option.name.common TS error

Property 'name' does not exist on type 'Country[]'

Although modifying the code to access the first element resolved the error temporarily, it reduced the searching capabilities:

option => option[0].name.common.toLowerCase().includes(filterValue)))

Seeking guidance on the utilization of correct operators and resolving TypeScript errors, I questioned if employing operators like mergeMap or switchMap would provide a solution. Additionally, I pondered the effectiveness of rectifying TypeScript errors and whether the implemented approach was fundamentally flawed. Any assistance in refining this functionality would be greatly appreciated.

Can someone assist me in overcoming these challenges?

javascript angular typescript rxjs observable

Answer 1

Answer №1

Sample pipe

import { Pipe, PipeTransform } from '@angular/core';
import { Country } from './country';

@Pipe({
  name: 'filterList',
})
export class FilterListPipe implements PipeTransform {
  transform(countries: Country[]|null, searchText: string): Country[] {
    if(!countries) return []
    return countries.filter(country=>country.name.indexOf(searchText) != -1);
  }
}

app.component.html

<form [formGroup]="controlsGroup">
  <input type="text" formControlName="searchInput"/>

  <div *ngFor="let country of countries | async | filterList:searchText">
    <div>Name: {{country.name}}</div>
    <div>Ranking: {{country.ranking}}</div>
    <div>Metric: {{country.metric}}</div>
  </div>
</form>

app.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { Country } from './country';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'piper-example-app';
  searchText = ''

  controlsGroup: FormGroup

  constructor(public fb:FormBuilder){
    this.controlsGroup = fb.group({
      searchInput: new FormControl('')
    })

    this.controlsGroup.get('searchInput')?.valueChanges.subscribe(value => this.searchText=value)
  }

  countries: Observable<Country[]> = of([{
    name: 'United States of America',
    ranking: 1,
    metric: 'burgers per capita'
  },
  {
    name: 'China',
    ranking: 9000,
    metric: 'power level lower bound'
  }])
}

Indeed, there are some unconventional practices in the code where filtering the incoming observable stream of arrays of countries could be more efficient. It is also important to expand the filter function to check all properties or adjust the criteria as needed.

A more comprehensive example demonstrating the filter part with different property types being filtered slightly differently:

custom-filter.pipe.ts (alternative)

import { Pipe, PipeTransform } from '@angular/core';
import { Country } from './country';

@Pipe({
  name: 'filterList',
})
export class FilterListPipe implements PipeTransform {
  transform(countries: Country[]|null, searchText: string): Country[] {
    if(!countries) return []
    return countries.filter(country => {
      let foundMatch = false;
      let property: keyof typeof country
      for(property in country) {
        if(typeof country[property] === 'string') {
          if((country[property] as string).indexOf(searchText) != -1)
          foundMatch = true
        }else {
          if((country[property] as number) == parseInt(searchText))
          foundMatch = true
        }
      }
      return foundMatch
    });
  }
}

Answer 2

Sample pipe

import { Pipe, PipeTransform } from '@angular/core';
import { Country } from './country';

@Pipe({
  name: 'filterList',
})
export class FilterListPipe implements PipeTransform {
  transform(countries: Country[]|null, searchText: string): Country[] {
    if(!countries) return []
    return countries.filter(country=>country.name.indexOf(searchText) != -1);
  }
}

app.component.html

<form [formGroup]="controlsGroup">
  <input type="text" formControlName="searchInput"/>

  <div *ngFor="let country of countries | async | filterList:searchText">
    <div>Name: {{country.name}}</div>
    <div>Ranking: {{country.ranking}}</div>
    <div>Metric: {{country.metric}}</div>
  </div>
</form>

app.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { Country } from './country';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'piper-example-app';
  searchText = ''

  controlsGroup: FormGroup

  constructor(public fb:FormBuilder){
    this.controlsGroup = fb.group({
      searchInput: new FormControl('')
    })

    this.controlsGroup.get('searchInput')?.valueChanges.subscribe(value => this.searchText=value)
  }

  countries: Observable<Country[]> = of([{
    name: 'United States of America',
    ranking: 1,
    metric: 'burgers per capita'
  },
  {
    name: 'China',
    ranking: 9000,
    metric: 'power level lower bound'
  }])
}

Indeed, there are some unconventional practices in the code where filtering the incoming observable stream of arrays of countries could be more efficient. It is also important to expand the filter function to check all properties or adjust the criteria as needed.

A more comprehensive example demonstrating the filter part with different property types being filtered slightly differently:

custom-filter.pipe.ts (alternative)

import { Pipe, PipeTransform } from '@angular/core';
import { Country } from './country';

@Pipe({
  name: 'filterList',
})
export class FilterListPipe implements PipeTransform {
  transform(countries: Country[]|null, searchText: string): Country[] {
    if(!countries) return []
    return countries.filter(country => {
      let foundMatch = false;
      let property: keyof typeof country
      for(property in country) {
        if(typeof country[property] === 'string') {
          if((country[property] as string).indexOf(searchText) != -1)
          foundMatch = true
        }else {
          if((country[property] as number) == parseInt(searchText))
          foundMatch = true
        }
      }
      return foundMatch
    });
  }
}

Answer 3

Answer №2

Here is an expanded version of your current code with some suggested changes:

export class HomeComponent {
  allCountriesList: Country[] = [];
  countriesStream$!: Observable<Country[]>;
  myControlInput = new FormControl('');
  constructor(private apiServiceCall: ApiService) {}

  ngOnInit() {
    this.apiServiceCall
      .getAllCountries()
      .subscribe((countriesData) => (this.allCountriesList = countriesData));

    this.countriesStream$ = combineLatest({
      searchTermValue: this.myControlInput.valueChanges.pipe(startWith('')),
      countriesData: this.apiServiceCall
        .getAllCountries()
        .pipe(tap((countriesData) => (this.allCountriesList = countriesData))),
    }).pipe(map(({ searchTerm }) => this._filterData(searchTerm)));
  }

  private _filterData(criteria: string | null): Country[] {
    if (criteria === null) {
      return this.allCountries;
    }
    const filteredValue = criteria?.toLowerCase();

    return this.allCountries.filter((countryItem) =>
      countryItem.name.common.toLowerCase().includes(filteredValue)
    );
  }
}

The updated approach involves maintaining the original country list separately and utilizing the form control's value change event to filter the relevant countries for display.

The corresponding template should be structured as follows:

<input type="text" [formControl]="myControlInput" />

<div *ngFor="let country of countriesStream$ | async">
  <div>Name: {{ country.name.common }}</div>
</div>

Answer 4

Here is an expanded version of your current code with some suggested changes:

export class HomeComponent {
  allCountriesList: Country[] = [];
  countriesStream$!: Observable<Country[]>;
  myControlInput = new FormControl('');
  constructor(private apiServiceCall: ApiService) {}

  ngOnInit() {
    this.apiServiceCall
      .getAllCountries()
      .subscribe((countriesData) => (this.allCountriesList = countriesData));

    this.countriesStream$ = combineLatest({
      searchTermValue: this.myControlInput.valueChanges.pipe(startWith('')),
      countriesData: this.apiServiceCall
        .getAllCountries()
        .pipe(tap((countriesData) => (this.allCountriesList = countriesData))),
    }).pipe(map(({ searchTerm }) => this._filterData(searchTerm)));
  }

  private _filterData(criteria: string | null): Country[] {
    if (criteria === null) {
      return this.allCountries;
    }
    const filteredValue = criteria?.toLowerCase();

    return this.allCountries.filter((countryItem) =>
      countryItem.name.common.toLowerCase().includes(filteredValue)
    );
  }
}

The updated approach involves maintaining the original country list separately and utilizing the form control's value change event to filter the relevant countries for display.

The corresponding template should be structured as follows:

<input type="text" [formControl]="myControlInput" />

<div *ngFor="let country of countriesStream$ | async">
  <div>Name: {{ country.name.common }}</div>
</div>

What is the best way to use form input to filter an Observable?

Answer №1

Answer №2

Similar questions

Displaying a pop-up window upon clicking on an item in the list view

When running Rollup, a syntax error occurs due to the use of the "import" syntax in an internal Rollup file using Javascript

How can I automatically choose the first element in an ng-repeat loop using AngularJS?

The application component seems to be stuck in a loading state and is not appearing as expected on my index.html

Using Rails AJAX to dynamically load partials without the need to submit

I'm only appending the final element to the JavaScript array

When utilizing CKEDITOR, the default TEXTAREA is obscured, and CKEDITOR does not appear

Comparing Twitter Bootstrap and PrimeNg: The Ultimate Guide for UI Development in Angular 2

What strategies can be used to manage Error return types in Typescript?

Error while conducting unit testing: Element 'X' is unrecognized

Utilizing Leaflet-geotiff in an Angular 6 Environment

Using Redux and Typescript to manage user authentication states can help streamline the process of checking whether a user is logged in or out without the need for repetitive checks in the mapStateToProps function

Simultaneously updating the states in both the child and parent components when clicked

Using AngularJS to auto-populate additional fields after selecting an option from the typeahead autocomplete feature

Developing forms in Angular 5 involves the decision of either constructing a specific model for the form group inputs or opting for a more generic variable with two

Developing a Universal Type in Typescript

Angular 5 - Error: Uncaught ReferenceError: req variable is not defined

Transformation of Array of Objects to Array of Values using Node.js

Steps for customizing the dropdown arrow background color in react-native-material-dropdown-v2-fixed

I'm trying to figure out how to switch the Heroes array to the res array while utilizing the react useState hook. It's been successful in my past projects, but for some reason,