diff --git a/starwars/src/app/search/search.component.html b/starwars/src/app/search/search.component.html index e0c879c..cf57b97 100644 --- a/starwars/src/app/search/search.component.html +++ b/starwars/src/app/search/search.component.html @@ -3,3 +3,9 @@ +
+

Search Results

+ +
diff --git a/starwars/src/app/search/search.component.ts b/starwars/src/app/search/search.component.ts index 24ea12b..a02bf38 100644 --- a/starwars/src/app/search/search.component.ts +++ b/starwars/src/app/search/search.component.ts @@ -9,6 +9,8 @@ import 'rxjs/add/operator/toPromise'; }) export class SearchComponent implements OnInit { + results; + constructor( private http: Http ) { } @@ -16,7 +18,7 @@ export class SearchComponent implements OnInit { findCharacter(name){ this.http.get('http://swapi.co/api/people/?search=' + name) .toPromise() - .then(response => console.log(response.json())); + .then(response => this.results = response.json().results); } ngOnInit() { diff --git a/use_an_api.md b/use_an_api.md index d14cabc..044b69a 100644 --- a/use_an_api.md +++ b/use_an_api.md @@ -176,3 +176,39 @@ The `rxjs/add/operator/toPromise` import that we previously wrote adds the abili You can test this by looking in the console ## Display AJAX results in app + +In `src/app/search/search.component.ts` add a public `results` property and set it to the results of the AJAX call when it succeeds: + +```javascript +export class SearchComponent implements OnInit { + + results; //add the public property here + + constructor( + private http: Http + ) { } + + findCharacter(name){ + this.http.get('http://swapi.co/api/people/?search=' + name) + .toPromise() + .then(response => this.results = response.json().results); //set it here + } + + ngOnInit() { + } + +} +``` + +Now add some HTML to `src/app/search/search.component.html` to display the results: + +```html +
+

Search Results

+ +
+``` + +You can test this in the app