How to search index based values in table using angular 4?

Question

I am using angular 4 and i have used array which contains list of values i need to search based on the index..i am getting error...How to search index based values?

ang.html:

<div class="col-md-6" >
 <input type="text" [(ngModel)]="searchText"  class="form-control" placeholder="Search By Category" />
            </div>
<table class="table table-striped table-bordered table-responsive full-data-table">
    <thead>
    <tr><th S.No</th>
     <th>sName</th>
     <th>cName</th>
    </thead>
   <tbody>
            <tr *ngFor="let item of data | category: searchText">
            <td>{{item[0]}}</td>
            <td>{{item[1]}}</td>
            <td>{{item[2]}}</td>
   </tbody>

pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'category' })
export class CategoryPipe implements PipeTransform {
  transform(categories: any, searchText: any): any {
    if(searchText == null) return categories;

    return categories.filter(function(category){
      return category.toLowerCase.indexOf(searchText.toLowerCase() != -1);
    })
  }
}

error:

ERROR TypeError: Cannot read property 'indexOf' of undefined

Values:

[["Chrocin","paracetamal","combination name",200,10,18,"tablet",22,1],["Phar","chw","combination name",200,6,18,"tablet",3,2]]

Answer 1

You can not perform operation toLowerCase() on subarray. Your code is doing this:

[].toLowerCase()

You need to iterate through subarray of your array. And you can not toLowerCase() numbers, cast it to string. Something like this:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'category' })
export class CategoryPipe implements PipeTransform {
  transform(categories: any, searchText: any): any {
    if(searchText == null) return categories;

    //categories are [[]]
    return categories.filter(function(category){

      //category is []
      return category.filter(function(subCategory) {

        //subCategory is string that we compare with searchText
        return subCategory.toString().toLowerCase() == searchText.toLowerCase();
      });
    })
  }
}

If you wanna search by any field in subarray then you can do something like this:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'category' })
export class CategoryPipe implements PipeTransform {
  transform(categories: any, searchText: any): any {
    if(searchText == null || searchText == '') {
      return categories;
    } else {
      let filteredCategories = [];
      categories.filter(function(category){
        category.filter(function(subCategory) {
          if(subCategory.toString().toLowerCase() == searchText.toLowerCase()) {
            filteredCategories.push(category);
          }
        });
      });
      return filteredCategories;
    }
  }
}

And here is an example: https://stackblitz.com/edit/search-pipe