fetch + live data · MP2 Showcase (Part 2) · API keys + security (if time)

Today we learned how to pull live data from the internet with fetch: give it a URL, await the response, read the JSON, and put it on the page. The full walkthrough is in the fetch and live data slides. The one habit to keep: open the raw API URL in your browser and read the actual JSON before you write any code, because AI will confidently assume fields that do not exist.

• Finished the MP2 Showcase: eight more tools, each presenter walking through what the app does, which part was their own idea, and one piece of the JavaScript they understand.
• Reviewed two common loop bugs through poll questions: the off-by-one (i <= length reads one step past the last item) and using = instead of += when building a list.
• Learned what an API is and how your code talks to one.
• Learned JSON, the text format APIs speak in.
• Used fetch with async and await to pull live data and show it on the page.
• Added a live search filter over the data, and a POST request that sent a message to a class API you could watch arrive on a live dashboard.

An API is how your code gets data directly. A person opens a website and reads it with their eyes. Your code cannot do that, so a provider gives it an API instead: your code sends a request and gets structured data back. Think of a restaurant. The kitchen prepares the data, the API is the waiter that carries your order in and your food out, and the API documentation is the menu that tells you what you can ask for.

Read the raw JSON first. Before you write code, paste the API URL into your browser and look at what comes back. JSON is just text made of key and value pairs. One rule that trips people up: in JSON the keys are always in double quotes ("population": 4200), while a plain JavaScript object does not need them. Knowing the real shape of the data is what stops the next problem.

AI will invent fields that are not there. In class I asked for a town's data and the AI assumed a mayor field. The API never had one. I only caught it by opening the real response and checking. Whenever you rely on a reference, whether from AI or anywhere else, verify it against the real thing before you trust it.

Why await. Data from the internet takes an unknown amount of time to arrive, and you do not want the page to freeze while it waits. await lets that one line pause for the response while the rest of your page keeps working. It is like making coffee and toasting bread at the same time instead of standing and waiting for one before starting the other.

try and catch for things out of your control. The API lives on someone else's server. It can go down, the network can drop, the data can come back in a shape you did not expect. Wrap a fetch in try / catch so that when it fails, your page shows a friendly message instead of breaking. Save try / catch for exactly this kind of outside-your-control work, not for your own logic.

Search is just a matter of "is this included." The live town filter checks whether the text you typed appears inside each name and shows the ones that match. That same small check powers the search and filter features in your own projects.

1. Keep going on MP3. Read the MP3 assignment. Create a new public repo first (lowercase, hyphens, named for what the app does), then write your PROPOSAL.md. Pick an API, open its URL in your browser, and read the raw JSON before you propose. Proposal due Sunday, 7/5. Final due Sunday, 7/12.
2. Do the two fetch practice pages in your oim3690 repo (both from today's slides):
   • fetch-fun.html: pick a free public API (a random dog image, a joke, an advice slip), then by hand write an async function that fetches it, reads one field, and shows it on the page. Add try / catch. After it works, let AI add a "Surprise me" button.
   • post-message.html: send a message to the class API with your own X-Token (your first name, twice), then let AI add an input and a button.
3. Finish playlist.html from last class if you have not yet (the render-from-data list: an array, a loop, one item per entry).
4. Keep your weekly log (logs/wk07.md) current.

Monday we vote on the MP2 Class Favorite, give the lightning talks that we did not reach today, cover how to keep an API key safe, and start on browser APIs and organizing your code.