What Is An API Anyways?
Note: this one is originally from 2020, but I refreshed it in 2026. The code now uses modern JavaScript (async/await), and the live example points at a service that's actually still up.
An AP...What?
API stands for Application Programming Interface. This sounds like mumbo-jumbo to most people who haven't come across it before. As names go, it's honestly kind of rubbish at first glance. What kind of Programming? Interface to what? What applications? That's because most of what we as humans visibly interact with on the web are User Interfaces. However, an API is made for machines to talk to machines, or for data and other features that have become critical for the web. From logging in and authorization, data, push notification, weather reports, news sites, pretty much everything on the web is using some flavor of api.
Probably the best description that I've ever heard to describe these are to think of them as the 'the waiters of the internet'. Most modern software exists in two parts. The frontend, which is what the user sees and interacts with, and the backend, where the data lives, records, and is worked with to do all the neat things we've come to expect from software. An API is a piece of the server that takes the users requests (the order), takes it to the kitchen (the server), and then returns with the meal (the data). Without API's, users would sit at tables hungry, and kitchens would be full of food with nothing to do. (of course, they do not need users to dictate what they data they want to see/what they want to order. Many, many apis are used just by default to bring data & information in, manipulate it, use it, or show it. For example news sites often use them to show the rss feed without the user ever hitting a button.)
How this all works is that a company or developer works out several URL endpoints that offer up (usually) JSON data, which is then interpreted into an easier to read format once it gets back to the user (after some manipulation). If you've ever logged into a site, tried to look up the weather in your area, or used a search bar, you've most likely interacted with an API, you just don't know it. Which is good! Well-functioning APIs are critical to the web, and the better something works, the less the user has to struggle with it.
This isn't just something that software developers can do either. Api's are, more often than not, really, really easy to use. In fact, if you don't mind copy-pasting, you can even run them in your browser. Here's how to do it with first a set of dummy data, and then we'll do something more interesting like call the price of bitcoin, right now.
Usable examples in browser window
Hit f12, and open up console. Paste in this section of code into the console window and hit enter. (These examples use await, which any modern browser console lets you paste and run directly.)
(Don't worry, jsonplaceholder is a place to just test fetching short bits of dummy data, and can do absolutely no harm to your pc or files. Even if it could, each browser window is independent and contained from each other, and everything else on your system.)
const response = await fetch("https://jsonplaceholder.typicode.com/users/");
const users = await response.json();
console.log(users);
If you pasted the above code and ran it, it would take a few seconds to fetch, and then show you something like this.
(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 1, name: "Leanne Graham", username: "Bret", email: "[email protected]", address: {…}, …}
1: {id: 2, name: "Ervin Howell", username: "Antonette", email: "[email protected]", address: {…}, …}
2: {id: 3, name: "Clementine Bauch", username: "Samantha", email: "[email protected]", address: {…}, …}
3: {id: 4, name: "Patricia Lebsack", username: "Karianne", email: "[email protected]", address: {…}, …}
4: {id: 5, name: "Chelsey Dietrich", username: "Kamren", email: "[email protected]", address: {…}, …}
5: {id: 6, name: "Mrs. Dennis Schulist", username: "Leopoldo_Corkery", email: "[email protected]", address: {…}, …}
6: {id: 7, name: "Kurtis Weissnat", username: "Elwyn.Skiles", email: "[email protected]", address: {…}, …}
7: {id: 8, name: "Nicholas Runolfsdottir V", username: "Maxime_Nienow", email: "[email protected]", address: {…}, …}
8: {id: 9, name: "Glenna Reichert", username: "Delphine", email: "[email protected]", address: {…}, …}
9: {id: 10, name: "Clementina DuBuque", username: "Moriah.Stanton", email: "[email protected]", address: {…}, …}
length: 10
That's neat and all, but we're really just fetching a string (bunch of text-characters together), and it's not too exciting. I mean, we got a few lines with funny brackets. Big deal, right?
Using 'live' data instead
Here's one from CoinGecko. It pulls the latest bitcoin price in a handful of the world's top currencies, live. Let's pull it all in exactly the same way as we did before, and then we'll refine it down to only what we care about (USD) so there's less noise and it's a bit more readable.
const response = await fetch(
"https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd,eur,gbp,jpy,cad,aud",
);
const data = await response.json();
console.log(data);
this returns something that looks like this (the exact numbers will be different whenever you run it, that's the whole point of it being live):
{
bitcoin: {
usd: 65724,
eur: 56592,
gbp: 48936,
jpy: 10542273,
cad: 91909,
aud: 92899
}
}
Still more than we asked for. We can narrow it down by reaching into the object for just the slice we care about.
const response = await fetch(
"https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd,eur,gbp,jpy,cad,aud",
);
const data = await response.json();
console.log(data.bitcoin);
Here we fetch the same data, turn the response into JSON, and then ask for just the bitcoin section of the object instead of the whole thing.
That will return
{ usd: 65724, eur: 56592, gbp: 48936, jpy: 10542273, cad: 91909, aud: 92899 }
We're getting closer, but there's still some bum data we don't really care about. Let's prune that, and fix up some things.
and (finally) returning only the price
const response = await fetch(
"https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd",
);
const data = await response.json();
console.log(data.bitcoin.usd);
which returns a grand total of
65724
And there it is! If we were building a frontend, we could manipulate it further: change how it looks, or wait for some kind of user interaction before fetching. But for now, just the number is just fine. And if you want to grab the latest price any time, wrap the whole thing in a function:
async function btcPrice() {
const response = await fetch(
"https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd",
);
const data = await response.json();
return data.bitcoin.usd;
}
await btcPrice(); // run this any time for a fresh price
Now typing await btcPrice() re-runs the whole request and hands you the latest number, as long as that tab is open.
And that's really it. The great power of the web, of fetching data, of interacting databases, is just talking to databases at just the right spot asking for just the right information. (you can also POST information too, but perhaps we'll save that for another time.)