ERROR TypeError: Cannot read property 'toLowerCase' of undefined. Ionic 3

Question

I'm trying to filter data from firebase database by using angular.But it keep get error like this-ERROR TypeError: Cannot read property 'toLowerCase' of undefined.Can someone help me?Below are my function in search.ts

searchuser(searchbar) {


this.filteredusers = this.temparr;
var q = searchbar.target.value;

if (q.trim() == '') {
  return;
}

this.filteredusers = this.filteredusers.filter((v) => {
  if (v.displayName.toLowerCase().indexOf(q.toLowerCase()) > -1 || v.subject.toLowerCase().indexOf(q.toLowerCase()) > -1) {
    return true;
  }

  return false;
})}

Below are my html code

<ion-content padding>
    <ion-searchbar [(ngModel)]="searchstring" (input)="searchuser($event)" placeholder="Search"></ion-searchbar>
    <ion-list no-lines>
      <ion-list>
        <ion-item-sliding *ngFor="let key of filteredusers" >
          <ion-item >
            <ion-avatar item-left>
              <img src="{{key.photoURL}}">
            </ion-avatar>
            <h2>{{key.displayName}} </h2>
            <p>Rate/Hour:RM{{key.rate}}</p>
            <p>Subject:{{key.subject}}</p>
            <p>Distance:0.5KM</p>

          </ion-item>


          <ion-item-options slide="left">
            <button ion-button color="primary" (click)="call(key)">
              <ion-icon name="call"></ion-icon>
              Call
            </button>
          </ion-item-options>

        </ion-item-sliding>
      </ion-list>
    </ion-list>

</ion-content>

My expect result of the filtered is the search function can filtered name and subject from the database.

Answer 1

Update your condition checking to:

if (v.displayName && v.displayName.toLowerCase()...

You typically get that error if you try to call a method (in this case toLowerCase ) or access a property on a null or undefined object. That's essentially Javascript's version of null reference exception .

By checking v.displayName you ensure that the property displayName exists on your object v and its value not undefined or null .

If it's possible that the displayName property may be of any type other than string , then you might also benefit from type-checking your property before invoking toLowerCase on it. You can type-check using typeof v.displayName === "string" . So, a more complete check would be:

if (v.displayName && typeof v.displayName === "string" && v.displayName.toLowerCase()...

Answer 2

Problem: Cannot read property 'toLowerCase' of undefined
Finally solve this problem. This may help other people as the xcode update is really new and there isn't much info about this. I was using iOS platform v4.5.4. Apparently xcode 11 has some conflict with a validation in the file list-emulator-build-targets. What you have to do is this:
remove ios platform from Cordova
command
ionic cordova platform rm ios

command:
ionic cordova platform add ios@latest
OR
cordova platform add ios@latest

This will install ios v5.0.1 which works out fine with xcode 11.

Answer 3

尝试更新您的cordova。

sudo npm install cordova@latest

Answer 4

ERROR TypeError: Cannot read property 'toLowerCase' of undefined.

Those who are facing this issue as generic in ionic 3 while build for ios

just remove the platform ios and then add ios@latest platform

  ionic cordova platform rm ios
  ionic cordova platform add ios@latest

OR

sudo ionic cordova platform rm ios
sudo ionic cordova platform add ios@latest

Answer 5

This is the Error

this.filteredusers = this.filteredusers.filter((v) => {
  if (v.displayName.toLowerCase().indexOf(q.toLowerCase()) > -1 || v.subject.toLowerCase().indexOf(q.toLowerCase()) > -1) {
    return true;
  }

  return false;
})}

Change 'q' to 'v'

  this.filteredusers = this.filteredusers.filter((v) => {
      if (v.displayName.toLowerCase().indexOf(v.toLowerCase()) > -1 || v.subject.toLowerCase().indexOf(v.toLowerCase()) > -1) {
        return true;
      }

      return false;
    })}