What is an API?
API stands for Application Programming Interface — a "window" through which separate programs communicate. A weather app, for example, doesn't collect its own weather observations. It asks the meteorological agency's API "what's the weather in Tokyo today?" and displays the answer on screen. Think of it like a store's register querying headquarters for inventory at another branch.
The basic API flow
What is JSON?
JSON (JavaScript Object Notation, pronounced "jay-son") is a format that represents data as "key: value" pairs. It's human-readable and supported natively by almost every programming language, making it the most common format for API communication. It looks like this:
{ "city": "Tokyo", "weather": "sunny", "temp": 22, "humidity": 60 }
Each "key" (like city) is paired with a "value" (like Tokyo). JSON also supports arrays and nesting. It's lighter and more readable than the older XML format, which is why it's now dominant.
Where is it used?
Recommended ways to use APIs
JavaScript's fetch function lets you call an API directly from the browser. For example: fetch('https://api.example.com/weather').then(r => r.json()).then(d => console.log(d)) retrieves JSON data. Free APIs like "JSONPlaceholder," "PokeAPI (Pokémon info)," and the Japan Meteorological Agency API are great for first practice.
Once you're comfortable, try embedding a "weather block," "Pokédex," or "exchange rate display" into your own site. You'll instantly feel how much more exciting dynamic sites can be.
For practice, open the browser's DevTools (F12), go to the Network tab, and observe the API URL, the returned status code, and the JSON body. 200 means success, 404 means not found, 429 means too many requests, and 5xx means a server-side problem. The number alone narrows down the cause significantly.
When using services that require an API key, never paste the key directly into HTML or JavaScript. In a public page it's visible to anyone and can be misused. Start with key-free practice APIs to understand the structure, then read the official docs and terms of service before using anything real.
Common pitfalls
- Writing an API key (essentially a password) directly in HTML/JavaScript — anyone can read it and abuse it. Hide keys on the server side.
- Free APIs have limits like "max N requests per minute." Sending too many in a short time can get you blocked.
- CORS (cross-origin restriction) causing the browser to block requests. When something doesn't work, check the Network tab in F12.
How will this help you in the future?
People who can work with APIs and JSON are valued in web development, mobile development, data analysis, and AI integration. No-code tools like Zapier and Make also use API connections under the hood, so API literacy is a "bridge between humans and machines" skill that remains in demand.
At work, "the UI is running but data isn't showing up" is a common complaint. Being able to separate whether the problem is in the UI, a slow API response, or a changed JSON structure makes you invaluable. APIs and JSON aren't just for web app builders — they're essential reading and writing skills for anyone using AI tools or business automation.
What you can do today
- Type
https://jsonplaceholder.typicode.com/usersin your browser's address bar and look at the JSON. - In the F12 Console, run:
fetch('https://jsonplaceholder.typicode.com/users').then(r=>r.json()).then(console.log) - Build a small HTML page that displays the API results on screen.
Summary
fetch function you can call an API and pull in external data — weather, maps, Pokémon info — right into your site. Understanding how this works expands what you can build in web development. Start small with a free practice API.
Check JSON looks closest to?