Searchbar toLowerCase() error

I am trying to use search bar component but ı got this error

Cannot read property 'toLowerCase' of null

These are my codes

getItems(ev: any) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    let val = ev.target.value;

    this.contac.forEach(element => {
      console.log("element",element.displayName.toLowerCase())
    });

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {

      this.contac = this.contac.filter((item) => {
        return (item["displayName"].toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

I checked item[“displayName”] weather it s null or not .It s not null

Any suggestion

Thanks in Advance

hi techsnake, do you use it on a <ion-select>, '<ion-input>' or what kind please?

If this is actually true, then it must be val that is null.

1 Like

suggestion to debug:

hitbutton() {
console.log(myform.value); // use your form name if any
console.log(this.displayName); // (object or value?)
}

initializeItems() {

    this.imageList = this.employeesList;
}
getItems(ev: any) {
  
    this.initializeItems();


    let val = ev.target.value;


    if (val && val.trim() != '') {
        this.imageList = this.imageList.filter((item) => {
            return (item.Name.toLowerCase().indexOf(val.toLowerCase()) > -1);
        })
    }
}

that above code working fine to you. try this

item[“displayName”]
to
item.displayName