New page from json


#1

Hello;

I have a problem with my code where I can not “pull” the output of the variable “searchBar” that comes from my html, to be able to exebir the second page that comes from an API in JSON.

where search.ts is inside ** ** where I should call the search function with the output of the search bar variable, but I do not know how to accomplish this task.
search.html:

<ion-header>
  <ion-navbar>
  </ion-navbar>
</ion-header>


<ion-content>
    <ion-searchbar #searchBar
    [showCancelButton]="true"
    (keyup.enter)="search(searchBar.value)">     
  </ion-searchbar>
  <ion-refresher (ionRefresh)="doRefresh($event)">
  </ion-refresher>
  <ion-card class="card-background-page" *ngFor="let responseSearch of lista_filmes_search">

      <ion-item>
          <h2 class="search_title">{{ responseSearch.title }}</h2>
          <p class="search_date">{{ responseSearch.release_date }}</p>
        </ion-item>
    <img [src]="'https://image.tmdb.org/t/p/w300/' + responseSearch.poster_path">

    <ion-card-content>
      <p>{{ responseSearch.overview }}</p>
    </ion-card-content>
    <button ion-button block (click)="abrirDetalhes(responseSearch)">Detalhes</button>
  </ion-card>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content> 

search.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
import { MovieProvider } from '../../providers/movie/movie';
import { FilmeDetalhesPage } from '../filme-detalhes/filme-detalhes';

/**
 * Generated class for the SearchPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-search',
  templateUrl: 'search.html',
  providers: [
    MovieProvider
  ]
})
export class SearchPage {

  public lista_filmes_search = new Array<any>();
  public page = 1;
  public page_old = 0;

  public loader;
  public responseSearch;
  public isRefreshing: boolean = false;
  public refresher;
  public infiniteScroll;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public movieProvider: MovieProvider,
    public loadingCtrl: LoadingController
  ) {
  }

  fechaCarregando() {
    this.loader = this.loadingCtrl.create({
      content: "Carregando filmes...",
    });
    this.loader.present();
    this.loader.dismiss();
  }

  doRefresh(refresher) {
    this.refresher = refresher;
    this.isRefreshing = true;
    **this.search();**
  }

  abrirDetalhes(filme) {
    this.page_old = this.page;
    this.navCtrl.push(FilmeDetalhesPage, { id: filme.id });
  }


  doInfinite(infiniteScroll) {
    this.page++;
    this.infiniteScroll = infiniteScroll;
    **this.search();**
  }

  search(searchBar: any) {
    if (this.page != this.page_old) {
      this.responseSearch = this.navParams.get(searchBar);
      this.movieProvider.getSearchMovie(searchBar).subscribe(
        data => {
          const response = (data as any);
          const objeto_retorno = JSON.parse(response._body);

          if (this.page == 1) {
            this.lista_filmes_search = objeto_retorno.results;
          } else {
            this.lista_filmes_search = this.lista_filmes_search.concat(objeto_retorno.results);
            this.infiniteScroll.complete();
          }

          console.log(objeto_retorno)
          this.fechaCarregando();
          if (this.isRefreshing) {
            this.refresher.complete();
            this.isRefreshing = false;
          }
        }, error => {
          console.log(error)
          this.fechaCarregando();
          if (this.isRefreshing) {
            this.refresher.complete();
            this.isRefreshing = false;
          }
        }
      )
    }
  }
}