JavaScript Simplified · One concept, one day, one project · Day 28 of 32

The Fetch API

Getting real data from the internet and showing it on the page. You build a country information app that loads live details on demand.

By the end of today you can

Request data from a URL with fetch
Turn the response into usable data with response.json()
Combine fetch with async, await and the DOM
Build a country information app

This is the moment everything has been building towards: your page asking the internet for data and showing it. fetch is how JavaScript makes a request to a URL. With async, await and the DOM, you can now load real information and put it on the screen.

1. fetch and response.json()

Definition

fetch(url) sends a request to a URL and returns a Promise for the response. The response is not the data yet; you call response.json() (also a Promise) to read the data as a JavaScript object. JSON is the text format data travels in; it looks just like a JavaScript object.

So a fetch is two awaits: one for the response, one for the data inside it.

2. Fetching on the Page

Here is a real fetch, triggered by a button, showing the result on the page. (The data here comes from a stand-in API so the example is stable; a real URL works the same way.)

What this code doesClicking the button fetches the country and shows its details.

index.html

1
2

<button id="load">Load Nigeria</button>
<div id="out">No data yet.</div>

style.css

#out{margin-top:12px;font-size:15px;line-height:1.7}

app.js

const button = document.getElementById("load");
const out = document.getElementById("out");

button.addEventListener("click", async function () {
  out.textContent = "Loading...";
  try {
    const response = await fetch("https://api.example.com/country/nigeria");
    const data = await response.json();
    out.innerHTML =
      "<b>" + data.name + "</b><br>" +
      "Capital: " + data.capital + "<br>" +
      "Population: " + data.population.toLocaleString();
  } catch (error) {
    out.textContent = "Could not load the data.";
  }
});

BROWSERindex.html  ·  after clicking Load and the data arriving

The handler is async. It awaits the response, then awaits the JSON, then builds the HTML from the data. Everything you learned meets here: an event, async/await, try/catch, and the DOM.

Today’s Mini Project

🌍 Country Information App

The page above is your project: a button that fetches a country and shows its name, capital and population. Swap the stand-in URL for a real one like the REST Countries API and it works the same way.

Real APIs to try

When you build this for real, try a free API such as the REST Countries API. The steps are identical: fetch the URL, await response.json(), then read the fields you want and put them on the page.

Challenge (15 minutes)

Add a second field to the display, like the region or a currency, by reading another property from the data. Expected: one more line of country detail on the page.

Try This

Change the handler to show "Loading..." for a moment before the data. (It already does; confirm you can see where that line is and why it runs first.)

Expected: you can point to the line that shows the loading message before the await.

Picture This

Your page just reached out to the internet, asked a question, and showed the answer. That is the thing that makes an app an app. You have finished Layer 5. Next week you combine everything into real, finished projects.

Checkpoint

What does fetch return?

A Promise for the response to a request. The response is not the data itself; you call response.json() to read the data from it.

Why are there two awaits in a typical fetch?

One awaits the response arriving, and one awaits response.json() turning that response into usable data. Both are Promises.

What is JSON?

The text format data travels in across the web. It looks just like a JavaScript object, and response.json() turns it into one you can use.

Tick Before You Move On

☐ I can request data with fetch
☐ I can read the data with response.json()
☐ I can combine fetch with async, await and the DOM
☐ I built the Country Information App

Quick Recap

fetch(url) requests data and returns a Promise for the response. response.json() reads the data from the response as an object. A typical fetch is two awaits: the response, then the JSON. fetch plus async/await plus the DOM is how pages show live data.

Next: Day 29, and the final layer: real-world JavaScript. You take live API data and build a proper mini news app with it.