.toLowerCase is not a function

Ionic Framework ionic-v3
1

i’m trying to make search bar … but i’m getting this error when i try to use it
.toLowerCase is not a function
html file

<ion-header no-border>
  <ion-toolbar no-border hideBackButton mode="ios">
    <ion-buttons start>
      <button ion-button navPop>
        <ion-icon class="back-icon" *ngIf=" this.Platform.dir() === 'ltr'" start name="md-arrow-round-back"></ion-icon>
        <ion-icon class="back-icon" *ngIf=" this.Platform.dir() === 'rtl'" start name="md-arrow-round-forward"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title class="page-title">{{'FCLINIC' | translate:param}}</ion-title>

<ion-searchbar *ngIf="isSearchbarOpened" ShowCancelButton="true"  (ionInput)="getClinc($event)" (ionCancel)="isSearchbarOpened=false"
      animated="true"></ion-searchbar>

    <ion-buttons end>
      <button ion-button end *ngIf="!isSearchbarOpened" (click)="isSearchbarOpened=true">
        <ion-icon class="search-icon" name="ios-search"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="list-ion-content" no-border>
  <ion-list class="list-view" mode="ios">
    <button no-border ion-item *ngFor="let Clinic of CLinics" (click)="pushProfile(Clinic.id)">
      <ion-avatar class="img-view" item-start>
        <img [src]="Clinic.image">
      </ion-avatar>
      <h3 class="text-header">{{Clinic.name}}</h3>
      <p class="text-info">{{Clinic.address}}</p>
<ion-icon class="rate-icon" item-end [name]="Clinic.stars < 1 ? 'md-star-outline' : 'md-star-half' ">
        <ion-note class="rate-num">{{Clinic.stars}}</ion-note>
      </ion-icon>

    </button>
  </ion-list>

</ion-content>

ts file

  import {
    Component
  } from '@angular/core';
  import {
    NavController,
    NavParams,
    Platform
  } from 'ionic-angular';
  import { ClinicProfilePage } from '../clinic-profile/clinic-profile';



  @Component({
    selector: 'page-clinc',
    templateUrl: 'clinc.html',
  })
  export class ClincPage {
    CLinics: string[];
    public isSearchbarOpened = false;
    constructor(public navCtrl: NavController, public navParams: NavParams, public Platform: Platform) {

      this.CLinics = this.navParams.get('Data');

      console.log(this.CLinics);
      

      this.initializeItems();

    }
    initializeItems() {
      this.CLinics
    }
    getClinc(ev : any) {
      // console.log(ev)
      this.initializeItems();
      var val = ev.target.value;
      if (val && val.trim() != ''){
        this.CLinics.filter((Clinic => {
          return Clinic.toLowerCase().indexOf(val.toLowerCase()) > -1;
            }
          )
        )

      }else{
        
      }
    }

    pushProfile(id : string){
      this.navCtrl.push(ClinicProfilePage, { id : id })
      
    }

  }

data I getting it

51%20AM
Screen Shot 2018-06-13 at 11.12.51 AM.png868×585 94.9 KB

also i tryied to use
Clinic.name.toLowerCase
but didn’t work

2

You can’t execute toLowerCase() on an object (Clinic in your case).
You have to execute it on a string-property directly.

return Clinic.city_name.toLowerCase().indexOf(val.toLowerCase()) > -1;
This will check if the city_name is equal to the val (all converted to lowercase)

3

It is more likely : Clinic[index].city_name

4

thank you for reply … no error now … didn’t return any thing

5

True, but he already uses a filter which stores the current object of the array (CLinics ) in Clinic

6

you right … but i still getting nothing now … what next? :sweat_smile:

7

any help guys … i stoped here

8

You’re getting nothing as .filter() does not change array that you are filtering, this returns a new array and you don’t assign this anywhere.
console.log() result of your filter() and you will see what is wrong

9

Try to remove this line at config.xml file.

…preference cor=“UIWebViewBounce” value=“false”