Searchbar doesn't work with API

Ionic Framework ionic-v3
1

why my searchbar work when I create an array in my component.ts, but, when I get data from API from server, then searchbar doesn’t work why, any idea ?

my component that work

searchQuery: string = '';
  citizens: any[];

  constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController) {
    this.initializeCitizens();
  }

  initializeCitizens() {
    this.citizens = [
      { id: 1, name: 'Rafael Moura', title: 'Causa trabalhista', avatar: 'assets/imgs/users/profiles-users/steve_jobs.png' },
      { id: 2, name: 'Thor', title: 'Martelo roubado', avatar: 'assets/imgs/users/profiles-users/thor.png' },
      { id: 3, name: 'Hulk', title: 'Cor azul', avatar: 'assets/imgs/users/profiles-users/hulk.png' },
      { id: 4, name: 'Homem-Aranha', title: 'Furto da teia', avatar: 'assets/imgs/users/profiles-users/homem aranha.png' },
      { id: 6, name: 'Mulher Maravilha', title: 'Assédio no ônibus', avatar: 'assets/imgs/users/profiles-users/mulher maravilha.png' },
    ]
  }


  getCauses(ev: any) {
    console.log(ev);
    // Reset lawyers back to all of the lawyers
    this.initializeCitizens();
    // set val to the value of the searchbar
    let val = ev.target.value;
    // if the value is an empty string don't filter the lawyers
    if (val && val.trim() != '') {
      this.citizens = this.citizens.filter((citizen) => {
        if((citizen.name.toLowerCase().indexOf(val.toLowerCase()) > -1) || (citizen.title.toLowerCase().indexOf(val.toLowerCase()) > -1)) {
          console.log('verdade');
          return true;
        } else {
          console.log('false');
          return false;
        }
      })
    }
  }

this way the methodo searchbar works

but, when I do this…

cause = {};
  searchQuery: string = '';
  occurrences: any[];

  constructor(private service: ServiceProvider, public navCtrl: NavController, public navParams: NavParams) {
    this.cause = this.navParams.get('cause');
    this.getOccurrences();
  }

  getOccurrences() {
    this.service.getDataToken('occurrences')
                .subscribe(
                  data =>  this.occurrenceSelected(data),
                  err => console.log(err)
                )
  }


  occurrenceSelected(occurrences) {
    this.occurrences = [];
    for(let occurrence of occurrences) {
      if(occurrence.cause_id == this.cause['id']) {
        this.occurrences.push(occurrence);
      }
    }
  }



  getItems(ev: any) {
    // Reset occurrences back to all of the occurrences
    this.getOccurrences();
    // set val to the value of the searchbar
    let val = ev.target.value;
    // if the value is an empty string don't filter the occurrences
    if (val && val.trim() !== '') {
      console.log(val);
      this.occurrences = this.occurrences.filter((occurrence) => {
        // if((occurrence.title.toLowerCase().indexOf(val.toLowerCase()) > -1)) {
          return (occurrence['title'].toLowerCase().indexOf(val.toLowerCase()) > -1);
        // }
        // else if (occurrence.description.toLowerCase().indexOf(val.toLowerCase()) > -1) {
        //     return true;
        // }
        //  else {
        //   return false;
        // }
      })
    }
  }

I’ve been trying everything but no result