İonic Json Data Search Select how can I do it

Ionic Framework ionic-v3
1

İonic Json Data Search Select how can I do it

Home.ts

import { Component, Provider } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ApiProvider } from '../../providers/api/api';
import { Observable } from 'rxjs/Observable';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { DetailPage } from '../detail/detail';
import SearchPage from '../search/search';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  datas: any;
  public get http(): HttpClient {
    return this._http;
  }
  public set http(value: HttpClient) {
    this._http = value;
  }
  
  public items:any = [];
  constructor(public navCtrl: NavController, 
              public api:ApiProvider, 
              private _http: HttpClient) {
     this.api.get().subscribe((stringToJsonObject)=>{
       console.log(stringToJsonObject);
       this.getData();
     });
   }
  
  getData(){
    let url = 'https://www.clinicbuzlazer.com/wp-json/wp/v2/alsp_listing?_embed';
    let data: Observable<any> = this.http.get(url);
    data.subscribe(result =>  {
      this.items = result;
    });
  }

  openDetail(item){
    this.navCtrl.push(DetailPage, {post:item});
  }

  openSearchPage(){
    this.navCtrl.push(SearchPage);
    }


  

}

Detail.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';

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


@Component({
  selector: 'page-detail',
  templateUrl: 'detail.html',
})
export class DetailPage {
  
  public items:any = [];
  post: any;
  http: any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.post = (navParams.get('post'));
  }

  getData(){
    let url = 'https://www.clinicbuzlazer.com/wp-json/wp/v2/alsp_listing?_embed';
    let data: Observable<any> = this.http.get(url);
    data.subscribe(result =>  {
      this.items = result;
    });
  }

}
2

I never inject HttpClient in pages. Instead I only do that in services, which provide Observables of business objects. Pages then require no modification if the manner or timing of acquiring those business objects changes.