From 00e889c1770a004d045b80a5105bfdf7a3b70dbb Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Tue, 20 Jun 2017 17:51:32 -0400
Subject: [PATCH] Display more data in the HTML

---
 starwars/src/app/search/search.component.html | 20 +++++++++++-
 use_an_api.md                                 | 32 +++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/starwars/src/app/search/search.component.html b/starwars/src/app/search/search.component.html
index cf57b97..5020947 100644
--- a/starwars/src/app/search/search.component.html
+++ b/starwars/src/app/search/search.component.html
@@ -6,6 +6,24 @@
 <section *ngIf="results">
     <h2>Search Results</h2>
     <ul>
-        <li *ngFor="let character of results">{{character.name}}</li>
+        <li *ngFor="let character of results">
+            <h3>{{character.name}}</h3>
+            <dl>
+                <dt>Birth Year</dt>
+                <dd>{{character.birth_year}}</dd>
+                <dt>Eye Color</dt>
+                <dd>{{character.eye_color}}</dd>
+                <dt>Hair Color</dt>
+                <dd>{{character.hair_color}}</dd>
+                <dt>Gender</dt>
+                <dd>{{character.gender}}</dd>
+                <dt>Height</dt>
+                <dd>{{character.height}}</dd>
+                <dt>Mass</dt>
+                <dd>{{character.mass}}</dd>
+                <dt>Skin Color</dt>
+                <dd>{{character.skin_color}}</dd>
+            </dl>
+        </li>
     </ul>
 </section>
diff --git a/use_an_api.md b/use_an_api.md
index 044b69a..5305cce 100644
--- a/use_an_api.md
+++ b/use_an_api.md
@@ -13,6 +13,7 @@
 1. Add the ability to make AJAX requests
 1. Make an AJAX request
 1. Display AJAX results in app
+1. Display more data in the HTML
 
 ## Create a new app
 
@@ -212,3 +213,34 @@ Now add some HTML to `src/app/search/search.component.html` to display the resul
 ```
 
 You can test this in the app
+
+## Display more data in the HTML
+
+Edit `src/app/search/search.component.html`:
+
+```html
+<section *ngIf="results">
+    <h2>Search Results</h2>
+    <ul>
+        <li *ngFor="let character of results">
+            <h3>{{character.name}}</h3>
+            <dl>
+                <dt>Birth Year</dt>
+                <dd>{{character.birth_year}}</dd>
+                <dt>Eye Color</dt>
+                <dd>{{character.eye_color}}</dd>
+                <dt>Hair Color</dt>
+                <dd>{{character.hair_color}}</dd>
+                <dt>Gender</dt>
+                <dd>{{character.gender}}</dd>
+                <dt>Height</dt>
+                <dd>{{character.height}}</dd>
+                <dt>Mass</dt>
+                <dd>{{character.mass}}</dd>
+                <dt>Skin Color</dt>
+                <dd>{{character.skin_color}}</dd>
+            </dl>
+        </li>
+    </ul>
+</section>
+```