CPNT 262 Day 10 - `fetch()` and Asynchronous Javascript

Housekeeping

• Assignment 3 announced
  • 10% of Final mark
  • Due: Oct 27 @ 11:59 PM

Trophy of the day

• A page displaying data fetched from an API!

1. Spoiler Demo

• Picsum gallery: Upgrade the gallery using an array of objects.

2. Postman and JSON Placeholder

Materials

• Working with JSON data
• Sample endpoints:
  • JSON Placeholder

Activity

• Using Postman and JSON Placeholder:

  1. Retrieve a list of albums;

     GET https://jsonplaceholder.typicode.com/albums
     

  2. Choose a record from the returned JSON and retrieve the data for just that record by using it's id:

     GET GET https://jsonplaceholder.typicode.com/albums/:id
     

3. Basics: Asynchronous Javascript

• Introducing asynchronous Javascript
• Video: Asynchronous Callbacks by Tony Alicea (you can stop at 1:48:00)

4. Fetching data with fetch()

Materials

• Fetching data from the server
• Gist: fetch GET: Retrieving data asynchronously
• Gist: Practice REST API endpoints

Activity

• Take one of the Practice REST API endpoints (or one from this list of list of public APIs) and either:
  • Display a single item on a web page;
  • Use .forEach() to display a list of items on a web page.

Prep

Asynchronous Javascript

• Asynchronous Javascript
  • General asynchronous programming concepts
  • Introducing asynchronous Javascript
• Video: Asynchronous Callbacks by Tony Alicea (you can stop at 1:48:00)

fetch() and JSON

• Fetching data from the server
• Working with JSON data
• Tool: JSON Placeholder

Public JSON APIs

• Using this List of Public APIs, find an endpoint (a URL that returns a json object, not an HTML page) that returns an array of objects. You will use this for an activity tomorrow.