Filtering results when searching with search bar but unable to get back to all the posts

Ionic Framework ionic-v3
1

Hello,

I’m creating a simple news reader. Right now I have a list of feeds that I show like this:

  <ion-card *ngFor="let feed of feeds">
    <img (click)="itemSelected(feed.url)" [src]="feed.img" />
    <ion-card-content (click)="itemSelected(feed.url)">
      <ion-card-title>
        {{feed.post_title}}
      </ion-card-title>
      <p [innerHTML]="feed.post_excerpt"></p><br/>
      <span [innerHTML]="feed.post_date" class="data_e_hora"></span> - <span>{{feed.autor}}</span>
  </ion-card>

and my .ts is:

  public feeds: Array <any>;

  fetchContent ():void {
    let loading = this.loadingCtrl.create({
      content: 'Searching...'
    });

    loading.present();

    this.http.get(this.url).map(res => res.json())
      .subscribe(data => {

        this.feeds = data.data;
        loading.dismiss();
      });
  }

This is working perfectly but I’m trying to implement a user search. First of all, I’d like the search bar to be hidden until the user presses the search button so I made:

private toggled: boolean;

constructor(public navCtrl: NavController, public loadingCtrl: LoadingController, public http: Http, public actionSheetCtrl: ActionSheetController, private sharingVar: SocialSharing, public storage: Storage) {
    this.toggled = false;
}

  toggleSearch() {
    this.toggled = this.toggled ? false : true;
  }

and for my HTML:

   <ion-searchbar *ngIf="toggled" [(ngModel)]="searchTerm" [showCancelButton]="true" (ionCancel)="toggleSearch()" (ionInput)="filterItems()" placeholder="Digite sua busca..." animated></ion-searchbar>
    <!-- Search Icon -->
    <ion-buttons end *ngIf="!toggled">
      <button ion-button icon-only (click)="toggleSearch()"><ion-icon name="search"></ion-icon></button>
    </ion-buttons>

This is also working perfectly when searching I’m using:

public hasFilter: boolean = false;
public searchTerm: string = '';
public searchTermControl: FormControl;

constructor(public navCtrl: NavController, public loadingCtrl: LoadingController, public http: Http, public actionSheetCtrl: ActionSheetController, private sharingVar: SocialSharing, public storage: Storage) {

  this.searchTermControl = new FormControl();
  this.searchTermControl.valueChanges.debounceTime(1000).distinctUntilChanged().subscribe(search => {
    if (search !== '' && search) {
      this.filterItems();
    }
  })
}

  filterItems() {
    this.hasFilter = false;
    this.feeds = this.feeds.filter((item) => {
        return item.post_title.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1;
    });
  }

And the search is also working but whenever I erase what I’m searching, I’m unable to go back to ALL the posts. What am I doing wrong?

Feeds is a JSON, that’s why I’m using this.post_title.toLowerCase()

Thank you!

2

That’s just because you are filtering out all the values from feeds variable and using that variable in ngFor.

Try using third variable like this.
in your .ts file where you are getting feeds use this.

this.http.get(this.url).map(res => res.json())
      .subscribe(data => {

        this.feeds = data.data;
        this.filterFeeds = this.feeds; // add this line
        loading.dismiss();
      });

Now edit filterItems() function to this.

filterItems() {
    this.hasFilter = false;
    this.feeds = this.filterFeeds.filter((item) => { /// change this.feeds to this.filterFeeds
        return item.post_title.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1;
    });
  }

This will work.

3

Here, I found an very easy way to implement search functionality in Ionic and Angular. Checkout: gestyy.com/ertwPT