implement search function

src/app/data-provider.service.ts

@@ -17,12 +17,16 @@ export class DataProviderService {
   // allData(){
   //   return this.http.get('https://bc50-104-199-132-26.ngrok.io/alldata');
   // }
-  public url = 'http://6447-35-186-184-86.ngrok.io'
+  public url = 'http://4255-34-91-36-11.ngrok.io/'
   insert(dbname: String,colname: String,web: String,cat: String){
     //return this.http.get<providerData>("http://localhost:/insert?dbname="+dbname+"&collectionname="+colname+"&web="+web+"&cat="+cat);
     return this.http.get<providerData>(this.url+"/insert?dbname=data&collectionname=testdata&web=com.burbn.instagram&cat=photos");
   }
 
+  public filter(cat: String){
+    return this.http.get(this.url+"/filter?cat="+cat);
+  }
+
   public getData(listData: any,lineChart: any) { 
     return this.cache.asObservable();
   }

src/app/home/home.page.ts

@@ -50,7 +50,7 @@ export class HomePage {
     this.hideNotice=true
     this.initializeChecklist();
     this.func();
-    //this.data=this.myDataProvider.getData(this.showData,this.lineChart);
+    //this.data=this.myDataProvider.getData();
   };
 
   initializeChecklist() {
@@ -85,7 +85,7 @@ export class HomePage {
   barChartMethod() {
     // Now we need to supply a Chart element reference with an object that defines the type of chart we want to use, and the type of data we want to display.
     //var data;
-    //console.log(this.myDataProvider.getData(this.showData,this.lineChart))
+    //console.log(this.myDataProvider.getData())
     var that = this
     this.myDataProvider.getData(null,null).subscribe(data => {
       var dataJSON: Array<Object>

src/app/tab1/tab1.page.html

@@ -6,6 +6,19 @@
 
 <ion-content>
   <ion-toolbar>
-    <ion-searchbar></ion-searchbar>
+    <ion-searchbar [(ngModel)]="searchbar" (search)="search($event)"></ion-searchbar>
   </ion-toolbar>
+  <ion-item *ngFor="let item of current">
+    
+    <h2><b>web: </b>{{item.web}}<br></h2>
+    <h6><b>category: </b>{{item.category}}<br></h6>
+    <h6><b>Type: </b>{{item.type}}<br></h6>
+    <h6><b>time: </b>{{item.time}}<br></h6>
+  </ion-item>
+  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
+    <ion-infinite-scroll-content
+      loadingSpinner="bubbles"
+      loadingText="Loading more data...">
+    </ion-infinite-scroll-content>
+  </ion-infinite-scroll>
 </ion-content>

src/app/tab1/tab1.page.ts

@@ -1,4 +1,6 @@
+import { ConstantPool } from '@angular/compiler';
 import { Component, OnInit } from '@angular/core';
+import { DataProviderService } from '../data-provider.service';
 
 @Component({
   selector: 'app-tab1',
@@ -7,9 +9,42 @@ import { Component, OnInit } from '@angular/core';
 })
 export class Tab1Page implements OnInit {
 
-  constructor() { }
-
+  constructor( public myDataProvider: DataProviderService) { }
+  public itemListData = []
+  public current = []
+  searchbar: any
+  cat: String
+  public page = 0
+  private itemperpage = 20
   ngOnInit() {
   }
 
+  search(event) {
+    console.log(this.searchbar);
+    var that=this
+    this.myDataProvider.filter(this.searchbar).subscribe((data: Array<any>)=>{
+      this.itemListData = data;
+      //console.log(this.itemListData)
+      this.page = 1;
+      that.current = []
+      var lowerbound = this.itemperpage*(this.page-1)
+      var upperbound = this.itemperpage*(this.page);
+      console.log(this.itemListData);
+      /* for(var i=lowerbound-1;i<upperbound-1;i++){
+        console.log(that.itemListData['data'][i])
+        that.current.push(that.itemListData[i])
+      } */
+      this.current = this.itemListData['data'].slice(0,upperbound);
+    })
+  }
+  loadData(event){
+    this.page++;
+      var lowerbound = this.itemperpage*(this.page-1)
+      var upperbound = this.itemperpage*(this.page);
+      this.current = this.itemListData['data'].slice(0,upperbound);
+      console.log(this.current)
+      event.target.complete()
+      //this.current = this.itemListData.slice(0,upperbound); 
+  }
+
 }