Search function isn't right

Hi! I am trying to write a function that searches this list but I need some help.

VIEW

<ion-header>

  <ion-navbar color="primary" no-border-bottom>
    <ion-title>Speakers</ion-title>
  </ion-navbar>

  <ion-toolbar no-border-top color="primary">
    <ion-searchbar color="light"
                   [(ngModel)]="queryText"
                   (ionInput)="updateSchedule()"
                   placeholder="Search">
    </ion-searchbar>
  </ion-toolbar>

</ion-header>

PROVIDER

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
// import { Observable } from 'rxjs/Observable';
import { Subject } from '../../models/Subject';
import { State } from '../../models/State';
import { Storage } from '@ionic/storage';

/*
  Generated class for the SubjectProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class SubjectProvider {

  subjects:Subject[];
  state:State;
//   data: any;

  constructor(public http: Http,public storage: Storage) {
      this.storage.get('subjectState').then((value) => {
          this.state=value;
      });
      this.storage.get('subjects').then((value) => {
          this.subjects=value;
      });
  }


   updateSubject(refresher){
    var context=this;
    this.http.post('api/update',{id:this.state.id,superType:"SUBJECT"}).map(res => res.json()).subscribe(data => {
        var states=data;

        refresher.complete();

        if(states.length>0){
        states.forEach(function(thisState, thisIndex, array) {

            if(thisState.operation==="CREATE"){
                if(thisState.tableName==="SubjectModel"){
                        context.http.post('api/fetch',thisState).map(res => res.json()).subscribe(data => {
                            context.subjects.push(data);
                        },
                        err =>{
                            console.log("Oops! "+err);
                        });
                } 
            }


            if(thisState.operation==="UPDATE"){
                if(thisState.tableName==="SubjectModel"){
                        context.http.post('api/fetch',thisState).map(res => res.json()).subscribe(data => {
                            context.subjects.forEach(function(thisSubject, subjectIndex, subjectArray) {
                                  if(thisSubject.id===data.id){
                                        thisSubject=data
                                  }
                            })
                        },
                        err =>{
                            console.log("Oops! "+err);
                        });
                }
                if(thisState.tableName==="RoleModel"){
                        context.http.post('api/fetch',thisState).map(res => res.json()).subscribe(data => {
                            context.subjects.forEach(function(thisSubject, subjectIndex, subjectArray) {
                                  thisSubject.subjectRoles.forEach(function(thisRole, roleIndex, roleArray) {
                                        if(thisRole.id===data.id){
                                                thisRole=data
                                        }
                                  })
                            })
                        },
                        err =>{
                            console.log("Oops! "+err);
                        });
                }
                if(thisState.tableName==="PermissionModel"){
                        context.http.post('api/fetch',thisState).map(res => res.json()).subscribe(data => {
                            context.subjects.forEach(function(thisSubject, subjectIndex, subjectArray) {
                                  thisSubject.subjectPermissions.forEach(function(thisPermission, permissionIndex, permissionArray) {
                                        if(thisPermission.id===data.id){
                                                thisPermission=data
                                        }
                                  })
                            })
                        },
                        err =>{
                            console.log("Oops! "+err);
                        });
                }
            
            }

            if(thisState.operation==="DELETE"){
                if(thisState.tableName==="SubjectModel"){
                        context.http.post('api/fetch',thisState).map(res => res.json()).subscribe(data => {
                            var index
                            context.subjects.forEach(function(thisSubject, subjectIndex, subjectArray) {
                                  if(thisSubject.id===data.id){
                                      index=subjectIndex
                                  }
                            })
                            context.subjects.splice(index,1)
                        },
                        err =>{
                            console.log("Oops! "+err);
                        });
                }

                if(thisState.tableName==="PermissionModel"){
                        context.http.post('api/fetch',thisState).map(res => res.json()).subscribe(data => {
                            var index
                            context.subjects.forEach(function(thisSubject, subjectIndex, subjectArray) {
                                  thisSubject.subjectPermissions.forEach(function(thisPermission, permissionIndex, permissionArray) {
                                        if(thisPermission.id===data.id){
                                            index=permissionIndex
                                        }
                                  })
                                  thisSubject.subjectPermissions.splice(index,1)
                            })
                            
                        },
                        err =>{
                            console.log("Oops! "+err);
                        });
                }

                if(thisState.tableName==="RoleModel"){
                        context.http.post('api/fetch',thisState).map(res => res.json()).subscribe(data => {
                            var index
                            context.subjects.forEach(function(thisSubject, subjectIndex, subjectArray) {
                                  thisSubject.subjectRoles.forEach(function(thisRole, roleIndex, roleArray) {
                                        if(thisRole.id===data.id){
                                            index=thisRole
                                        }
                                  })
                                  thisSubject.subjectRoles.splice(index,1)
                            })
                            
                        },
                        err =>{
                            console.log("Oops! "+err);
                        });
                }
           
            }
        })
    }
    else{

    }
    })
  }

  setSubjectState(state:State){
      this.storage.set('subjectState', state);
  }


  getSubjects(): Promise<Subject[]>{
        return this.storage.get('subjects').then((value) => {
            return value;
        });
  }

  }

TS PAGE of above view

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, List } from 'ionic-angular';
import { SubjectProvider } from '../../providers/subject/subject';
import { Subject } from '../../models/Subject';

/**
 * Generated class for the Speakers page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-speakers',
  templateUrl: 'speakers.html',
})
export class Speakers {

  speakers:Subject[]=[];
  isFav:boolean=false;
  fetchedFav=false;
  queryText = '';


  constructor(public navCtrl: NavController, public navParams: NavParams,public subjectProvider: SubjectProvider) {
      
       var context=this;
       this.isFav=this.navParams.get("isFav")

       this.subjectProvider.getSubjects().then((subjects)=>{
                  subjects.forEach(function(thisSubject, subjectIndex, subjectArray) {
                        thisSubject.subjectRoles.forEach(function(thisRole, roleIndex, roleArray) {
                            if(thisRole.roleName==="SPEAKER"){
                                if(context.isFav){
                                    context.subjectProvider.getFavSubjects().then((favSpeakers)=>{
                                        if(favSpeakers.indexOf(thisSubject.id)>-1){
                                            context.speakers.push(thisSubject) 
                                        }
                                    });
                                }
                                else{
                                   context.speakers.push(thisSubject) 
                                }
                            }
                        })    
                  })   
      })
      this.fetchedFav=true
     
  }

  ionViewDidLoad() {
    this.updateSchedule();
  }



    ionViewDidEnter(){
      var context=this;
      
      if(!context.fetchedFav){
            if(context.isFav){
                    context.speakers=[]
                    this.subjectProvider.getSubjects().then((subjects)=>{
                        subjects.forEach(function(thisSubject, subjectIndex, subjectArray) {
                                thisSubject.subjectRoles.forEach(function(thisRole, roleIndex, roleArray) {
                                    if(thisRole.roleName==="SPEAKER"){
                                            context.subjectProvider.getFavSubjects().then((favSpeakers)=>{
                                                if(favSpeakers.indexOf(thisSubject.id)>-1){
                                                    context.speakers.push(thisSubject) 
                                                }
                                            });
                                        
                                    }
                                })    
                        })   
                    })
            }

      }

      context.fetchedFav=false;
  }


//search function
   updateSchedule() {
                 this.results = this.getSubjects().filter((item) =>
                 item.speaker.toLowerCase().includes(this.queryText.toLowerCase()));                           
             }      
        }

}

Thank you for your help in anticipation.

What exactly “isn’t right”?
Are you trying to filter down a list you already have and display?

1 Like

Yes, I am trying to filter the list but I am not getting it right. In order words, I want to write a function that searches through and displays the search results.

Thank you.

Then problem #1 is: Your view isn’t displaying anything in the first place.

Have a look at https://github.com/ionic-team/ionic-conference-app, this implements something like what you are trying to do I think.

1 Like

Yes, it currently doesn’t display.

Thank you, I will check it out and get back to you; although this example looks large.

I would start by displaying all of the things you want to search/filter first.
If that works, you can start trying to filter this with the input you have.

This would be a lot easier to read if you just use arrow functions instead of manually doing all this “context” stuff.

yeah! I already have all that, it’s to get my search function right

          <ion-item-sliding class="transparent-sliding-item" *ngFor="let speaker of speakers" no-padding no-margin>
              <ion-item no-padding no-margin class="transparent-item" text-wrap tappable (click)="toProfile(speaker)" text-wrap>
                <ion-thumbnail item-left>
                  <img src="img/prof.jpg">
                </ion-thumbnail>
                <p class="name">{{speaker.firstName}} {{speaker.lastName}}</p>
                <span class="social-link"><i class="fa fa-linkedin-square speaker-social">{{speaker.social}}</i></span>
                <p class="text">{{speaker.company}}</p>
                
              </ion-item>
  
          </ion-item-sliding>

okay. Thanks for that.