Explore the contents of a Table

Question

Explore the contents of a Table

When using a WebService, I send JSON to the front-end and map it to display all its content in a table. My goal is to implement a search method that will filter the rows based on searched letters.

Component.ts

allCountries: AllCountry[];
applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.allCountries.filter = filterValue.trim().toLowerCase();
  }     ^^^^^^^^^^^^
           ERROR

Mapping

export class AllCountry {
    name: string;
    iso2: string;
    iso3: string;
    unicode: string;
    dial: string;
    currency: string;
    capital: string;
    continent: string;
}

HTML

<mat-label for="search">Search</mat-label>
            <input matInput type="text" name="searchString" (keyup)="applyFilter($event)" placeholder="Type to search..." />

      <table mat-table [dataSource]="allCountries">

            <ng-container matColumnDef="name">
                    <th mat-header-cell *matHeaderCellDef>Country</th>
                    <td mat-cell *matCellDef="let allCountries">{{allCountries.name}}</td>
                </ng-container>

                <ng-container matColumnDef="iso2">
                    <th mat-header-cell *matHeaderCellDef>ISO 2</th>
                    <td mat-cell *matCellDef="let allCountries">{{allCountries.iso2}}</td>
                </ng-container>

Error

Error TS2322: Type 'string' is not assignable to type '{ <S extends AllCountry>(callbackfn: (value: AllCountry, index: number, array: AllCountry[]) => value is S, thisArg?: any): S[]; (callbackfn: (value: AllCountry, index: number, array: AllCountry[]) => unknown, thisArg?: any): AllCountry[]; }'.

I am encountering an error because "filter" is available for simple arrays but not for arrays of objects. Unfortunately, I cannot provide more code as it is unrelated to my current issue. Thank you for your assistance.

angular typescript

Answer 1

Answer №1

One issue here is that trying to assign this.allCountries.filter as a property won't work because Array.filter is a function, not a property.

To properly filter the array, you need to call filter() with a filtering function as an argument.

For example, to filter countries based on a substring in their name using String.includes():

  this.filteredCountries = this.allCountries.filter(
      obj => obj.name.toLowerCase().includes(filterValue.trim().toLowerCase())
  );

It's recommended to have two separate arrays: one for all countries (allCountries) and another for the filtered countries according to the search text (e.g., filteredCountries), to avoid depleting the original array during multiple filtering cycles.

Here is an outline of the approach:

export class AppComponent {
  allCountries = [
    {
      name: "England"
    },
    {
      name: "France"
    }
  ];

  filteredCountries = [];
  ngOnInit() {
    this.filteredCountries = this.allCountries;
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    if (!filterValue) {
      // Empty filter, show all countries:
      this.filteredCountries = this.allCountries;
    } else {
      console.log("Filtering for " + filterValue);
      this.filteredCountries = this.allCountries.filter(
        obj => obj.name.toLowerCase().includes(filterValue.trim().toLowerCase())
      );
    }
  }
}

In the HTML, bind to filteredCountries instead of allCountries:

<table mat-table [dataSource]="filteredCountries">

  <!-- Code omitted for brevity -->

</table>

You can view the working code on StackBlitz at:

https://stackblitz.com/edit/angular-ivy-lzkxnr?file=src/app/app.component.ts

Answer 2

One issue here is that trying to assign this.allCountries.filter as a property won't work because Array.filter is a function, not a property.

To properly filter the array, you need to call filter() with a filtering function as an argument.

For example, to filter countries based on a substring in their name using String.includes():

  this.filteredCountries = this.allCountries.filter(
      obj => obj.name.toLowerCase().includes(filterValue.trim().toLowerCase())
  );

It's recommended to have two separate arrays: one for all countries (allCountries) and another for the filtered countries according to the search text (e.g., filteredCountries), to avoid depleting the original array during multiple filtering cycles.

Here is an outline of the approach:

export class AppComponent {
  allCountries = [
    {
      name: "England"
    },
    {
      name: "France"
    }
  ];

  filteredCountries = [];
  ngOnInit() {
    this.filteredCountries = this.allCountries;
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    if (!filterValue) {
      // Empty filter, show all countries:
      this.filteredCountries = this.allCountries;
    } else {
      console.log("Filtering for " + filterValue);
      this.filteredCountries = this.allCountries.filter(
        obj => obj.name.toLowerCase().includes(filterValue.trim().toLowerCase())
      );
    }
  }
}

In the HTML, bind to filteredCountries instead of allCountries:

<table mat-table [dataSource]="filteredCountries">

  <!-- Code omitted for brevity -->

</table>

You can view the working code on StackBlitz at:

https://stackblitz.com/edit/angular-ivy-lzkxnr?file=src/app/app.component.ts

Explore the contents of a Table

Answer №1

Similar questions

Using Angular, a class can serve as a method within another class

Directing users to varying pages based on a particular criteria

Best practice for including Angular in the list of dependencies for an npm library

Enabling static and non-static methods within interface in TypeScript

Obtain the closest numerical range using JavaScript

Executing TypeDoc on a Windows system results in zero files being created and no error messages reported

The initial UI did not match the server-rendered content, resulting in a Next.JS Hydration failure

Having issues with adding a form group to a form array in Angular 2 Reactive Forms

Angular CLI simplifies the process of implementing internationalization (i18n) for Angular

Simplify deeply nested JSON structures with TypeScript generics

Divide the list of commitments into separate groups. Carry out all commitments within each group simultaneously, and proceed to the next group

What is the process for creating a Deep Copy of an object in Angular?

I am attempting to retrieve a fixed set of information from a query within the resolver

The plugin by chartjs-plugin-crosshair is malfunctioning

Angular: Differences Between "Partial" and "Full" Compilation Modes

How can you obtain the user ID by verifying an email when using applyActionCode in Firebase 9 modular?

Dealing with Cross-Origin Resource Sharing (CORS) issues in Angular and Spring Boot: Addressing the 'Access-Control-Allow-Origin' header absence for a seamless connection. Discover effective solutions using both Angular

Utilizing Logical Operators in Typescript Typing

The file size of clr-ui-dark.min.css seems unexpectedly large, despite attempts to optimize the bundles

Ways to retrieve the ngValue from various select elements created in the HTML code