Fetching Data

Housekeeping

• Ash covering Thursday Lab Time

---

1. Spoiler Demos

• FizzBuzz

2. Introduction to Asynchronous JS

Materials

• MDN Readings:
  • General asynchronous programming concepts
  • Introducing asynchronous Javascript
• Video: Async JS Crash Course - Callbacks, Promises, Async Await by Brad Traversy

Slides: Asynchronous Javascript

3. Fetching JSON Data

Materials

• How to Use Fetch with async/await
• Working with JSON data
• Tool: JSON Placeholder
• Reference: List of Public APIs

Demo: Fetching data from JSON Placeholder

• Gist: fetch() - Asynchronous data with async/await

4. Utility function: randomIndex()

• Gist: Find a random item in an Array

---

Lab Time

Public JSON APIs

• Try using fetch() to retrieve placeholder data from JSON Placeholder, such as:
  • GET /photos
    • returns an array
  • GET /photos/8
    • returns a single object
  • GET /todos
    • returns an array
  • GET /todos/5
    • returns a single object
• Here's a list of some of Tony's favourite APIs to get you started with real data.
• Using this List of Public APIs, find an endpoint (a URL that returns a json object, not an HTML page) that returns either an object or an array of objects. You will use this for an activity tomorrow.
  • Tips - pick APIs where:
    • Auth is no
    • CORS is yes

---

Prep

Review: Objects

• Object basics
• Working_with_Objects

Asynchronous Javascript

• MDN Readings:
  • General asynchronous programming concepts
  • Introducing asynchronous Javascript
• Video: Async JS Crash Course - Callbacks, Promises, Async Await by Brad Traversy

fetch(), REST and JSON

• How to Use Fetch with async/await
• Working with JSON data
• Tool: JSON Placeholder
• Reference: List of Public APIs