Angular 6 filter multiple table column

Question

I have a table with bank details and I want to filter all across the table column based on the search field input. But its not working, can someone please help me debug the issue. When I'm typing something on the search field then the entire table data is disappearing.

<div>
  <div>
    <select (change)="OnSelectedCity($event)">
      <option *ngFor="let cityObj of cityList" [value]="cityObj.value">{{cityObj.displayValue}}</option>
    </select>
    <input type="text" [(ngModel)]="filterText" [formControl]="filterInput" />
  </div>
  <div>
    <table>
      <thead>
        <tr>
          <th *ngFor="let header of tableHeader">{{header}}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let bank of bankList | filterdata: filterText">
          <td>{{bank.ifsc}}</td>
          <td>{{bank.bank_id}}</td>
          <td>{{bank.branch}}</td>
          <td>{{bank.address}}</td>
          <td>{{bank.city}}</td>
          <td>{{bank.district}}</td>
          <td>{{bank.state}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div> 



transform(items: Array<any>, searchText: string): any {
    if (searchText !== undefined) {
      return items.filter(item => {
        const filter = Object.keys(item);
        filter.forEach(element => {
          if (item[element].toLowerCase().indexOf(searchText.toLowerCase()) === -1) {
            return false;
          }
          return true;
        });
      });
    } else {
      return items;
    }
  }

Possible duplicate of Using multiple fields on Filter Pipe | Angular 4 — Sameer
You should try to debug your code using your browser debugger and see what happens inside your transform method. — Kapcash

Batajus Batajus · Accepted Answer · 2018-12-03T20:58:53

You just have a simple error in your pipe. The error lies in the .forEach call, because it's not possible to stop or break a forEach loop, see the docs.

After the adjustment your pipe could look like this:

transform(items: Array<any>, searchText: string): any {
    if (searchText) {
        return items.filter(item => {
            const filter = Object.keys(item);
            // Array.some() returns true if at least one entry meets the given condition
            return filter.some(
                key => item[key].toLowerCase().indexOf(searchText.toLowerCase()) !== -1
            )
        });
    }

    return items;
}

Angular 6 filter multiple table column

1 Answers