diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index c9a28ec..08ea847 100644 --- a/src/app/search/search.component.ts +++ b/src/app/search/search.component.ts @@ -2,23 +2,25 @@ import { Component, OnInit } from '@angular/core'; import { Http } from '@angular/http'; import { Subject } from 'rxjs/Subject'; +import { SearchService } from './search.service'; // Observable class extensions import 'rxjs/add/operator/switchMap'; -import 'rxjs/add/operator/map'; import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/distinctUntilChanged'; @Component({ selector: 'app-search', templateUrl: './search.component.html', - styleUrls: ['./search.component.css'] + styleUrls: ['./search.component.css'], + providers: [SearchService] }) export class SearchComponent implements OnInit { results; searchTerms = new Subject(); constructor( + private heroSearchService: SearchService, private http: Http ) { } @@ -26,18 +28,11 @@ export class SearchComponent implements OnInit { this.searchTerms.next(name); } - createAPIObservable(name){ - return this.http.get('http://swapi.co/api/people/?search=' + name) - .map((response)=>{ - return response.json().results; - }); - } - ngOnInit() { this.results = this.searchTerms .debounceTime(300) .distinctUntilChanged() - .switchMap(name => this.createAPIObservable(name)); + .switchMap(name => this.heroSearchService.createAPIObservable(name)); } } diff --git a/src/app/search/search.service.ts b/src/app/search/search.service.ts new file mode 100644 index 0000000..f986c89 --- /dev/null +++ b/src/app/search/search.service.ts @@ -0,0 +1,15 @@ +import { Injectable } from '@angular/core'; +import { Http } from '@angular/http'; +import 'rxjs/add/operator/map'; + +@Injectable() +export class SearchService { + + constructor(private http: Http) {} + + createAPIObservable(name){ + return this.http + .get('http://swapi.co/api/people/?search=' + name) + .map(response=> response.json().results ); + } +}