Lesson 16 (Fetch & JSON)

Lesson 16: Fetch and JSON

In the prep work for this lesson, the students learned:

1. Why we need a standard format for exchanging data.
2. The rules for the JSON format.
3. What an API is.
4. How to use fetch to request data from an API.
5. How to make use of the data returned from an API.
6. The difference between synchronous and asynchronous processes.

Large Group Time (Instructor Notes)

Announcements

1. Check with your class Candidate Engagement Manager for any other announcements.

For Part-Time Students:

1. Graded assignment #5 is due soon!

For Full-Time Students:

• Welcome to Days 23 & 24
• Day 23:
  • Lesson 16
  • Assignment 4 due at end of day 23
• Day 24:
  • Introduce Graded Assignment 5 in the morning.
  • Rest of day is in-class work time for Assignment 5.
  • Assignment 5 due end of Day 29.

Topics That Require More Attention

1. Restate what "API" stands for, and provide examples of common APIs.
   1. Why are APIs a good thing?
   2. What sorts of information do APIs supply?
   3. How hard is it to create an API?
2. JSON looks a lot like JavaScript objects, but note the differences.
3. How is fetch similar to and different from HTTP requests (GET, POST)?
4. Live coding. Set up a fetch example and discuss:
   1. Syntax,
   2. How to use the dev tools to view what fetch does,
   3. The response keyword,
   4. How to use the response from an API to modify the HTML on a webpage.
5. Studio intro.

Studio (TF Notes)

1. Forking and cloning a GitHub repository should be old hat by now. If a student requires help, point them to a book example that shows how to fork and clone rather than walking them through the process again.
2. Absolutely, positively, NO EXCUSES! Complete this studio on your own.
   1. There are lots of tiny details that students may miss or mistype that cause their code to break.
   2. When a student asks for help, have them describe in detail what they have done, what was working before, and where they think their code might be misbehaving.
3. Some students might get confused about the sample JSON given in the instructions. Remind them that they do NOT need to cut and paste this data. Instead, their program will request data from an API.
4. Similarly, students might get confused about where to add the HTML for the astronaut data.
5. As always, encourage your studio group to try the Bonus missions, or play with the CSS file to try to change the appearance of the webpage.