🚀 Module 5: Fetching Data & Working with APIs
Now that you know how modern front-end applications are built using
components, it's time to tackle how they get their data. When you open an
app like Netflix, the movies you see aren't hardcoded into the HTML—they
are fetched from a server in real-time.
To do this, front-end developers use APIs (Application Programming
Interfaces) to request information from the backend database.
1. What is an API and JSON?
Think of an API as a waiter at a restaurant. You (the front-end application)
ask the waiter for a specific dish (data), the waiter goes to the kitchen (the
database/backend server), and brings the dish back to you.
The format servers use to send this data back is almost always JSON
(JavaScript Object Notation). It looks exactly like a standard JavaScript object:
JSON
"user": "Alex Code",
"status": "Learning APIs",
"projectsCompleted": 3
2. The Fetch API
Modern JavaScript has a built-in method called fetch() that allows you to
easily make these data requests over the network.
Because network requests take time, JavaScript uses Promises (via async
and await) to tell the browser: "Go grab this data in the background, and let
me know when it's ready so I don't freeze the screen."
3. Practice Assignment: Build a Live User Generator
Let's use a real, free public API to fetch a random user profile and display it
on our page every time a button is clicked.
Step 1: Update your HTML ([Link])
Replace your previous content inside the <main> tag with a profile card
template:
HTML
<main>
<div id="profile-card">
<h2 id="user-name">Loading user...</h2>
<p id="user-email"></p>
</div>
<button id="fetch-btn">Get Next User</button>
</main>
Step 2: Update your JavaScript ([Link])
We will use a free API endpoint ([Link] to request data,
parse the JSON response, and update our HTML dynamically.
JavaScript
// 1. Target our elements
const userName = [Link]('user-name');
const userEmail = [Link]('user-email');
const fetchButton = [Link]('fetch-btn');
// 2. Create an asynchronous function to get data
async function getRandomUser() {
try {
// Fetch the raw data from the public API
const response = await fetch('[Link]
// Convert the raw data into usable JSON
const data = await [Link]();
// Extract the user data from the API response structure
const user = [Link][0];
// 3. Update the DOM with the live data
[Link] = `${[Link]} ${[Link]}`;
[Link] = [Link];
} catch (error) {
[Link]("Something went wrong fetching data:", error);
[Link] = "Failed to load user.";
// 4. Trigger the function on page load and on button click
getRandomUser();
[Link]('click', getRandomUser);