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.