I keep encountering an error message that says "friend.toLowerCase" is not a function when I use Ionic's search function. The unique aspect of my program is that instead of just a list of JSON items, I have a list with 5 properties per item, such as friend.name, friend.status, and so on. I made some modifications like changing Ionics list to items and mine to friendsList. I suspect the error might be due to naming confusion, but I haven't been able to pinpoint the mistake.
HTML
<ion-searchbar (ionInput)="getFriends($event)"</ion-searchbar>
...
<ion-item *ngFor="let friend of friendsList">
...
<h2>{{friend.name}}</h2>
...
TS
export class RankfriendsPage {
friendsList;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.initializefriendsList();
}
initializefriendsList() {
this.friendsList = [
{
"name": "Alice", //list example
"status": "Online",
"img": "img/6.jpeg",
"img2": "img/33.jpeg",
"text": "+ADD"
},
];
}
getFriends(ev) {
// Reset items back to all of the items
this.initializefriendsList();
// set val to the value of the ev target
var val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.friendsList = this.friendsList.filter((friend) => {
return (friend.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
}