"Most real apps don't invent their data — they fetch it. Learn to request data, read it, and show it, and your pages connect to the whole web."
Learning Objectives
By the end of this module, you will be able to:
- Explain what an API is in plain terms
- Fetch data from the web with JavaScript
- Read JSON and display it
- Handle errors and store data locally
1. What's an API?
An API is a way for your code to ask another service for data — weather, prices, account info. You send a request to a URL; it sends data back, usually as JSON.
API stands for Application Programming Interface — a mouthful that simply means "an agreed-upon way for two programs to talk." You don't need to know how the weather service measures temperature or where it stores its data; you just need the address to ask and the shape of the answer you'll get back. Almost every app you use — maps, social feeds, online shops — is quietly calling dozens of APIs behind the scenes.
Key idea: An API is like a waiter. You (the browser) order from a menu (the API's requests), and the kitchen (the server) brings back exactly what you asked for — no need to know how it was made.
Explain like I'm new: An API is just a doorway with rules. You knock in a specific way (a URL and maybe some options), and something useful is handed back. You never walk into the kitchen yourself.
2. Fetching Data
JavaScript's fetch requests data. Because it takes time, we await the response:
[object Object], response = ,[object Object], ,[object Object],(,[object Object],);
,[object Object], data = ,[object Object], response.,[object Object],(); ,[object Object],
,[object Object],.,[object Object],(data.,[object Object],);Notice the two steps. fetch(...) sends the request and hands back a response — but not the data itself yet. Calling response.json() then reads the response body and turns the text into a real JavaScript object you can use. Both steps take a moment (the network is slow compared to your code), so await tells JavaScript: "pause this line until the answer arrives, but don't freeze the whole page while you wait."
Concept: await only works inside an async function (or at the top level of a module). It doesn't make things faster — it just lets you write "wait for this, then continue" in a clean, top-to-bottom style instead of tangled callbacks.
3. JSON & Displaying Data
JSON looks just like JavaScript objects and arrays:
[object Object], ,[object Object],[object Object], ,[object Object],[object Object], ,[object Object],[object Object], ,[object Object],[object Object], ,[object Object],[object Object], ,[object Object],[object Object], ,[object Object],Read it with dot notation (data.name) and put it on the page by updating the DOM (Module 12) — e.g., balanceEl.textContent = data.balance.
Putting it together, a tiny "show my balance" flow reads the data and paints it onto the page:
[object Object], res = ,[object Object], ,[object Object],(,[object Object],);
,[object Object], account = ,[object Object], res.,[object Object],();
,[object Object],.,[object Object],(,[object Object],).,[object Object], = account.,[object Object],;
,[object Object],.,[object Object],(,[object Object],).,[object Object], = ,[object Object], + account.,[object Object],;The distinction that trips people up is format versus object. JSON is text traveling over the network — quotes around every key, no functions, just data. Once response.json() parses it, you hold a normal JavaScript object whose values you reach with account.name or account.balance.
4. Errors & Local Storage
Networks fail, so handle problems gracefully, and use local storage to remember small things (like a login token or theme) in the browser:
[object Object], {
,[object Object], res = ,[object Object], ,[object Object],(url);
,[object Object], (!res.,[object Object],) ,[object Object], ,[object Object], ,[object Object],(,[object Object],);
,[object Object], data = ,[object Object], res.,[object Object],();
} ,[object Object], (err) {
,[object Object],(,[object Object],);
}
,[object Object],.,[object Object],(,[object Object],, ,[object Object],); ,[object Object],A request can fail for many reasons — no internet, a typo in the URL, the server being down, or the item simply not existing. The try/catch block lets you attempt the risky work and, if anything goes wrong, run a friendly fallback instead of crashing. Checking res.ok matters because fetch does not treat a "404 Not Found" as a failure on its own — the promise still succeeds, so you must inspect the status yourself.
Reading a saved value back is just as easy: localStorage.getItem("theme") returns what you stored (or null if nothing is there). Local storage only holds text, and only on that one browser, so it is perfect for small preferences — not for secrets or large amounts of data.
Beginner mistake: Assuming a fetch always succeeds. Always check response.ok and wrap risky calls in try/catch, then show the user a friendly message instead of a broken page.
Practice task: Use a free public API (like a random-joke or weather API) to fetch data in the console and log one field from the result. You've just connected your code to the live web.
Key Takeaway: An API lets your code request data; fetch returns JSON, which you read like an object and display by updating the DOM. Always handle failures (response.ok, try/catch) with a friendly message, and use local storage to remember small pieces of data in the browser.
Further Learning
Adapted from Microsoft's Web Dev for Beginners (MIT License). Bank project from the source curriculum.