How websites fetch data from APIs (explained with a simple Pokémon project)

 

When I first started learning JavaScript, I didn’t really understand how websites actually get their data. I thought everything was just written into the page somewhere.

Then I built a small project where I generated a random Pokémon, and that was the first time I worked with an API.

So instead of explaining this in a complicated way, I’ll just use that project as an example.

What is an API?

An API is basically a place where you can ask for data.

Instead of storing everything yourself, you can send a request to another server and it gives you the data back.

In my case, I used the Pokémon API. It has data for all Pokémon, like their names, images, stats and more. I didn’t create any of that data myself. I just asked for it.

What happens when you click the button

In my project, there is just a button. When you click it, a few things happen in the background.

First, a random number is generated. This number represents a Pokémon.

Then a URL is created that looks something like this:

https://pokeapi.co/api/v2/pokemon/25

That request is sent to the API. The API then responds with data about that Pokémon.

How the code actually fetches the data

This is the important part. In JavaScript, you can use fetch() to request data from an API.

My code looks like this:

let id = Math.floor(Math.random() * 1024) + 1;
let fetchid = "https://pokeapi.co/api/v2/pokemon/" + id;

fetch(fetchid)
  .then(response => response.json())
  .then(data => {
    imgElement.src = data.sprites.front_default;
    output.innerHTML = data.name;
  });

What this does is:

It sends a request to the API, waits for a response, and then converts that response into usable data. After that, it takes the name and the image and puts them into the website.



Why this matters

This is basically how a lot of modern websites work.

Instead of loading everything at once, they request data when they need it. That’s how you get things like dynamic content, live updates, or personalized information.

Even though my project is very small, the idea behind it is the same.

Why I used Pokémon

I think this part is important. If you build something like this, it should be fun.

Pokémon was just an easy choice because it’s familiar and there’s a public API for it. It made the whole thing more interesting to build and easier to understand.

Final thoughts

This was one of the first projects where I understood that websites are not just static pages. They can request data, process it, and show something new every time.

And once you understand this, a lot of things in web development start to make more sense.


If you want to try it or look at the code:

Comments

Post a Comment

Popular posts from this blog

How to Burn a CD on Windows 11 (Step-by-Step Guide for Beginners)

Image
Disclaimer: This page contains affiliate links. If you purchase through these links, I may earn a small commission at no extra cost to you. Burning a CD on Windows 11 is still possible and surprisingly easy, even on modern laptops. All you need is a USB CD burner and blank CDs. In this guide, I’ll show you step by step how to create your own music or data CD in just a few minutes. Step 1- Get what you need: To get started, you’ll need an external USB CD burner and a pack of blank CDs. Most modern laptops no longer include a built-in drive, so using an external one is the easiest solution. Insert a blank CD into your burner before continuing. Here are some simple options to get started: Burner Blank CDs Step 2 - Open Windows Media Player: Windows 11 still includes Windows Media Player. Open it and go to the “Burn” tab in the top right corner. You should see your connected USB CD burner listed there, along with an area where you can drag your files. Step 3 - Drag files: Now simply ...
Read more

I built a random Pokémon generator while learning JavaScript

Image
  I built a random Pokémon generator while learning JavaScript Open Tool Page View Source Code A while ago, when I started learning JavaScript, I made a small project just to understand how things actually work. Nothing serious, just trying things out and seeing what happens. Recently I saw a TikTok where someone was building a random Pokémon team using Google’s number generator. And I thought, wait, I already made something like that. So I went back and found this old project again. It’s basically just a small website where you press a button and it gives you a random Pokémon. It picks a random number, sends a request to an API, and then shows the name and the image. That’s all it does, but at the time it felt like a big step. The main reason I built it was because I wanted to understand how websites actually get data. Before that, everything I did was kind of static. This was one of the first times where I worked with real data coming from somew...
Read more

How to Use APIs in a Web Game (Pokémon Example with JSON Optimization)

How I Built a Pokémon API Game and Optimized It Using JSON I built a simple browser game where you compare two Pokémon and guess which one has higher stats. The idea is very simple. You see two Pokémon and pick the one you think has the higher value. The game uses real data from an API, in this case the PokéAPI. That makes it a good small project to understand how APIs work in a real scenario. Overview Random Pokémon Generator Fetching Data per Round Using a Local JSON File Performance Impact Conclusion At the beginning I used the most direct approach. Every time the user clicked a button, the game sent a fetch request to the API. I had already used this pattern in an earlier project, a random Pokémon generator, so it felt natural to reuse it. For that kind of tool it works fine. The problem started when I turned the idea into a game. In a higher or lower game you do not just fetch once. You fetch multiple times per round. One round needs two Pokémon. Ten rounds can...
Read more