From 5f939ed0282c44736fcd9f439359befb31debadd Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Sat, 17 Jun 2017 22:09:25 -0400
Subject: [PATCH] showing characters in a film

---
 src/app/films/films.component.html |  7 +++++++
 src/app/films/films.component.ts   | 10 ++++++++++
 2 files changed, 17 insertions(+)

diff --git a/src/app/films/films.component.html b/src/app/films/films.component.html
index 2f07664..ae04097 100644
--- a/src/app/films/films.component.html
+++ b/src/app/films/films.component.html
@@ -13,4 +13,11 @@
         <dt>Producer</dt>
         <dd>{{selectedFilm.producer}}</dd>
     </dl>
+    <button (click)="showCharacters(selectedFilm)">View Characters</button>
+    <div *ngIf="selectedFilmCharacters.length > 0">
+        <h3>Chracters</h3>
+        <ul>
+            <li *ngFor="let character of selectedFilmCharacters">{{character.name}}</li>
+        </ul>
+    </div>
 </section>
diff --git a/src/app/films/films.component.ts b/src/app/films/films.component.ts
index dc7cf10..7e18316 100644
--- a/src/app/films/films.component.ts
+++ b/src/app/films/films.component.ts
@@ -11,11 +11,21 @@ import 'rxjs/add/operator/toPromise';
 export class FilmsComponent implements OnInit {
   films;
   selectedFilm;
+  selectedFilmCharacters = [];
 
   constructor(private http: Http) { }
 
   selectFilm(film){
       this.selectedFilm = film;
+      this.selectedFilmCharacters = [];
+  }
+
+  showCharacters(film){
+      film.characters.forEach((characterUrl) => {
+          this.http.get(characterUrl)
+            .toPromise()
+            .then(response => this.selectedFilmCharacters.push(response.json()));
+      });
   }
 
   ngOnInit() {