# Ionic Pipes Filter not working

**URL:** <https://forum.ionicframework.com/t/ionic-pipes-filter-not-working/94641>\
**Category:** ionic-v3\
**Created:** [June 16, 2017, 11:03am UTC](https://forum.ionicframework.com/t/ionic-pipes-filter-not-working/94641 "2017-06-16T11:03:57Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sonuyadav](https://avatars.discourse-cdn.com/v4/letter/s/e56c9b/32.png) [@sonuyadav](https://forum.ionicframework.com/u/sonuyadav)\
**Post date:** [June 16, 2017, 11:03am UTC](https://forum.ionicframework.com/t/ionic-pipes-filter-not-working/94641/1 "2017-06-16T11:03:57Z")

</div>

I am working to filter ion-select option data, with my **ionic 3** project. but it is not working.

**Array :**  
`result:[{service_status:"Cancelled by Consumer"},{service_status:"Pending"},{service_status:"Pending"}]`

with my select-option i want to show only data which having `service_status:Pending`

**cancel-service.html**

```auto
<ion-select formControlName="requids" #reqid (ionChange)="reqSelect(reqid.value)">
          <ion-option value="{{data.service_status}}" *ngFor="let data of servicelist | filter-array:{filterby: Pending}" >{{data.service_type}}</ion-option>
        </ion-select>

```

**cancel-services.module.ts**

```auto
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CancelServicesPage } from './cancel-services';

@NgModule({
  declarations: [
    CancelServicesPage,
  ],
  imports: [
    IonicPageModule.forChild(CancelServicesPage),
  ],
  exports: [
    CancelServicesPage
  ]
})
export class CancelServicesPageModule {}

```

**app.module.ts**

```auto
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { FilterArrayPipe } from '../pipes/filter-array/filter-array';

@NgModule({
  declarations: [
    MyApp,
    FilterArrayPipe
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
  ]
})
export class AppModule {}

```

**filter-array.ts**

```auto
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter-array',
})
export class FilterArrayPipe implements PipeTransform {
 
  transform(array: any[], filterby: any): any {
  	console.log('test');
    return array;
  }
}

```

Even console log data not showing, i visit multiple example and try them but unable to make this working. seems some dependency i am missing ?

chrome console errors

```auto
TypeError: Cannot read property 'toUpperCase' of undefined ("" #reqid (ionChange)="reqSelect(reqid.value)">
          <ion-option value="{{data.service_status}}" [ERROR ->]*ngFor="let data of servicelist | filter-array:{filterby: Pending}" 

```

someone can help for this?

Additionally i tried like example [https://stackoverflow.com/questions/43299610/ionic-3-cant-find-pipe](https://stackoverflow.com/questions/43299610/ionic-3-cant-find-pipe) but it give error duplicate import module.

---

<div class="post-metadata">

**Author:** ![imediasolutions](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/imediasolutions/32/115876_2.png) [@imediasolutions](https://forum.ionicframework.com/u/imediasolutions)\
**Post date:** [June 16, 2017, 1:29pm UTC](https://forum.ionicframework.com/t/ionic-pipes-filter-not-working/94641/2 "2017-06-16T13:29:39Z")

</div>

In your cancel-service.html, try put your filter string Pending between quotes like ‘Pending’

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [June 16, 2017, 9:28pm UTC](https://forum.ionicframework.com/t/ionic-pipes-filter-not-working/94641/3 "2017-06-16T21:28:06Z")

</div>

I would not use a pipe for this, for the reasons outlined [here](https://angular.io/guide/pipes#no-filter-pipe).

---

<div class="post-metadata">

**Author:** ![sonuyadav](https://avatars.discourse-cdn.com/v4/letter/s/e56c9b/32.png) [@sonuyadav](https://forum.ionicframework.com/u/sonuyadav)\
**Post date:** [June 17, 2017, 5:14am UTC](https://forum.ionicframework.com/t/ionic-pipes-filter-not-working/94641/4 "2017-06-17T05:14:45Z")

</div>

@imediasolutions i tried as you suggest but still same issue. @rapropos What do you suggest me to use than ?

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [June 17, 2017, 6:14am UTC](https://forum.ionicframework.com/t/ionic-pipes-filter-not-working/94641/5 "2017-06-17T06:14:49Z")

</div>

> [@sonuyadav](#):
>
> What do you suggest me to use than ?

Do the relevant filtering in the component controller code.

---

<div class="post-metadata">

**Author:** ![sonuyadav](https://avatars.discourse-cdn.com/v4/letter/s/e56c9b/32.png) [@sonuyadav](https://forum.ionicframework.com/u/sonuyadav)\
**Post date:** [June 17, 2017, 9:37am UTC](https://forum.ionicframework.com/t/ionic-pipes-filter-not-working/94641/6 "2017-06-17T09:37:22Z")

</div>

@rapropos Thanks, As per your suggestion i managed this working with typescript using below code.

`this.servfiltered = this.servicelist.filter(servl => servl.service_status=='Pending');`

---

<div class="post-metadata">

**Author:** ![bernardsa](https://avatars.discourse-cdn.com/v4/letter/b/b77776/32.png) [@bernardsa](https://forum.ionicframework.com/u/bernardsa)\
**Post date:** [July 12, 2018, 1:50pm UTC](https://forum.ionicframework.com/t/ionic-pipes-filter-not-working/94641/7 "2018-07-12T13:50:30Z")

</div>

this solved my problem.  
Thanks