Getting a “TypeError: Cannot read property ‘filter’ of undefined” when trying to search a list



<ion-content fullscreen>
  <!-- Searchbar with a placeholder -->
    placeholder"Zoek een locatie"

      <!-- locatie cards -->
      <ion-col class"row1" size"11">
        <ion-list lines"none">
          <ion-item *ngFor"let location of locations">
            <ion-card class"locatieCard">
                    <ion-card-subtitle>{{ location.Name }}</ion-card-subtitle>
                      (click)"presentPopover($event, location.Contact)"
                      Meer info

      <ion-col class"row2" size"1"> ion col 2 </ion-col>


import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { ToolbarTitleService } from '../Services/toolbar-title.service';
import { IonSearchbar, PopoverController } from '@ionic/angular';
import { PopoverComponent } from '../popover/popover.component';
import { SyncServiceService } from '../Services/sync-service.service';
import { UserService } from '../Services/user.service';
import { first } from 'rxjs/operators';

  selector: 'app-locaties',
  templateUrl: './locaties.component.html',
  styleUrls: ['./locaties.component.css'],
export class LocatiesComponent implements OnInit {
  public locations: any[];
  public locationsBackup: any[];

    private toolbarTitle: ToolbarTitleService,
    public popoverController: PopoverController,
    private syncService: SyncServiceService,
    private userService: UserService
  ) {}

  async ngOnInit() {
    this.user  await this.userService.getUser();
    // Haalt alle shops van de gebruiker op en zet ze in locations
    this.locations  await this.syncService.getShops(this.user);
    this.locations  await this.initializeItems();

  // Popover
  async presentPopover(ev: any, Contact: any) {
    const popover  await this.popoverController.create({
      component: PopoverComponent,
      componentProps: {
        phones: Contact.Phones[0].Number,
        email: Contact.Email,
        street: Contact.Addresses[0].Street1,
        city: Contact.Addresses[0].City,
      event: ev,
      translucent: true,
    return await popover.present();

  // Search
  async initializeItems(): Promise<any> {
    this.locations  await this.syncService
    this.locationsBackup  this.locations;
    return this.locations;

  // Filter
  async filterList(evt) {
    this.locations  this.locationsBackup;
    const searchTerm  evt.srcElement.value;

    if (!searchTerm) {

    this.locations  this.locations.filter((currentLocation) > {
      if (currentLocation.Name && searchTerm) {
        return (
          currentLocation.Name.toLowerCase().indexOf(searchTerm.toLowerCase()) >

I’m trying to filter through a list of stores. I keep getting a “Cannot read property ‘filter’ of undefined” error. I can’t seem to figure out what I’ve got to change to make it work. Locations is basically an array with objects of stores. Anyone got an idea what to do? I know it has to be something to do with the filterList function.


Until getShops() returns with value, locations are undefined (hence: cannot read property filter of undefined).

You can initialize it to an empty array:

locations  [];

or check against it being undefined in filterList.

Also, initializeItems is never called, therefore the same goes for locationsBackup.

Answered By – mbojko

Leave a Comment