Ionic Pipes Filter not working

Ionic Framework ionic-v3
1

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

<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

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

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

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

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 but it give error duplicate import module.

2

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

3

I would not use a pipe for this, for the reasons outlined here.

1 Like
4

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

5

Do the relevant filtering in the component controller code.

6

@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');

1 Like
7

this solved my problem.
Thanks