[Ionic2] REST Http Request

src>app>search.ts

import { Injectable, Component } from '@angular/core';

import { Http, Response } from '@angular/http';

import { NavController, Platform } from 'ionic-angular';

import 'rxjs/add/operator/map'

@Injectable()

@Component({

  selector: 'search-search',

  templateUrl: 'search.html'

})

export class Search

{

  searchQuery: string = '';

  items: Array<any>;

  itemsDummy: Array<any>;

  result: Object;

  page: number = 1;

  limit: number = 5;

  keyword: string = '';

  constructor(public navCtrl: NavController, private http:Http, private platform:Platform)

  {

    this.initializeItems();

  }

  initializeItems()

  {

    this.items = [];

  }

  searchList(keyword: string, offset: number)

  {

    let url = 'http://192.168.0.18:8082/search/' + keyword + '/' + this.limit + '/' + offset;

    let response = this.http.get(url).map((res: Response) => res.json());

    return response;

  }

  

  searchService(event, key)  {

      if(event.target.value.length > 2)

      {

          this.keyword = event.target.value;

          this.searchList(event.target.value, 0).subscribe(

              data => {

                this.items = [];

                this.items.push(data[index]);

              },

              err => {

                  console.log(err);

              },

              () => console.log('Movie Search Complete')

          );

      }

  }

}

src>pages>search>search.html

 <ion-list>

  <ion-item *ngFor="let item of items">

    <ion-thumbnail item-left>

      <img src="img/thumbnail-totoro.png">

    </ion-thumbnail>

    <h2>{{ item.Album }}</h2>

    <p>{{ item.Track }} - {{ item.Artist }}</p>

    <button ion-button item-right (click)="itemDownload($event, item)">Donwload</button>

    <button ion-button item-right (click)="itemPlay($event, item)">Play</button>

  </ion-item>

</ion-list>