Display AJAX results in app

starwars/src/app/search/search.component.html

@@ -3,3 +3,9 @@
     <input [(ngModel)]="name" type="text" placeholder="Character Name"/>
     <input (click)="findCharacter(name)" type="submit" value="Search"/>
 </section>
+<section *ngIf="results">
+    <h2>Search Results</h2>
+    <ul>
+        <li *ngFor="let character of results">{{character.name}}</li>
+    </ul>
+</section>

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() {

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
+<section *ngIf="results">
+    <h2>Search Results</h2>
+    <ul>
+        <li *ngFor="let character of results">{{character.name}}</li>
+    </ul>
+</section>
+```
+
+You can test this in the app