+
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
+
+