08_fetch.md

Using Fetch to get data

In this activity, we will use JavaScript's fetch to get data from an API and render it with a template. You will extend the example, which uses data from the JSON Placeholder API to fetch and render a fake list of users.

Setup

Clone and download my example repo which we went over in class. Install the dependencies (npm install) and run the dev server (npm run dev) to see the code in action.

Tweak it

The example uses JSON Placeholder API's users/ endpoint to get a list of users. Modify the example code to get data from a different endpoint from the API and update the template accordingly. The available routes are posts, comments, albums, photos, todos, and users. (You can see example data for each of these endpoints by clicking on them on the front page of the website.)

Next Steps

Peruse this list of publicly available APIs. Select one of them and use fetch to get some data from one of its endpoints. Following the pattern from the example, render the data to a page using a lit-html template.

Resources

• Allow CORS Chrome Extension
• MDN Docs Using Fetch
• Javascript.info fetch
• JSON Placeholder Guide
• lit-html docs
• vite docs
• Digital Ocean Fetch Tutorial
• List of public APIs