CODEWITHSUNDEEP
ionic-framework
ThomasH
ThomasH

Reputation: 91

Using ion searchbar to filter through http.get data in ionic

In my Ionic App, I have the following on my home.ts:

export class HomePage {

  itemsInitial = []; //initialize your itemsInitial array empty
  items = []; //initialize your items array empty
  gameTitlesInitial = []; //initialize your itemsInitial array empty
  gameTitles = []; //initialize your items array empty

  searchGameTitleString = ''; // initialize your searchItemsString string empty

  constructor(http: Http) {
    http.get('http://localhost/wordpress-templates/wordpress/index.php/wp-json/wp/v2/business/')
    .map(res => res.json())
    .subscribe(data => {
       this.itemsInitial = data;
       this.items = data;
       var gameTitles = this.items.map(function (el) {
         return el.title.rendered;
       });
       console.log(gameTitles);
    });
  }

  searchGameTitle(searchbar) {
          // reset items list with initial call
          this.gameTitles = this.gameTitlesInitial;
          // set q to the value of the searchbar
          var q = searchbar.target.value;

        // if the value is an empty string don't filter the items
        if (q.trim() == '') {
            return;
        }

      this.gameTitles = this.gameTitles.filter((v) => {
          if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) {
              return true;
          }
          return false;
      })
  }

}

....and the following on my home.html:

<ion-content>
    <ion-searchbar [(ngModel)]="searchGameTitleString" (input)="searchGameTitle($event)" placeholder="Search"></ion-searchbar>
    <ion-list>
        <button ion-item *ngFor="let gameTitle of gameTitles">
            {{gameTitle}}
        </button>
    </ion-list>
</ion-content>

Can someone help me: How can I replace the empty array "gameTitles" at the top with the values of the var "gameTitles" in my http get? 

console.log(gameTitles);

does indeed give me 

["game one", "game two", "game three"]

in the console... so the http get seems to work.

I'd greatly appreciate any help with this – I've tried many ways without any success.

Upvotes: 3

Views: 2727

Answers (1)

ThomasH
ThomasH

Reputation: 91

after further research here's what worked for me:

on home.html...

<ion-content>
  <ion-searchbar (ionInput)="getTitles($event);" [debounce]="500" placeholder="Suchen..." ></ion-searchbar>
  ...
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
      {{item.title.rendered}}
    </button>
  </ion-list>
</ion-content>

on home.ts...

this.http.get('someurlhere').map(res => res.json()).subscribe(data => {
  this.posts = data;
  this.initializeItems();
  console.log(this.posts);
  loadingPopup.dismiss();
});

getTitles(ev: any) {
  this.initializeItems();
  // set val to the value of the searchbar
  let val = ev.target.value;
  // if the value is an empty string don't filter the items
  if (val && val.trim() != '') {
    this.items = this.items.filter((item) => {
      return (item.title.rendered.toLowerCase().indexOf(val.toLowerCase()) > -1);
    })
  }
}

initializeItems() {
  console.log('initialized all items');
  this.items = this.posts;
}

Upvotes: 2

Related Questions