Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 3 · 6 / 7Fetching real data
Phase 3JavaScript for real apps
7 topics · 3–4 wks
  1. 1Arrow functions
  2. 2Destructuring and spread
  3. 3Modules and npm
  4. 4Events and handlers
  5. 5Promises and await
  6. 6Fetching real data
  7. 7Loading and error states
JourneyPhase 3Fetching real data
01 / 10Overview

Fetching real data

You'll learn to ask a server for data with fetch, turn the reply into a JavaScript object, and find the value you need.

Why it mattersWeather, cricket scores, prices, messages: almost every app shows data that lives on a server. fetch is how you get it.
about 90 min·needs: Promises and await, Objects, Arrays and map
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Article
Fetchjavascript.info · 15 min · English
MMamun's noteRead from the top until "Response headers". It uses await, just like this topic. Skip headers, POST requests and images for now.
Video
Learn Fetch API in 6 minutesYouTube · Web Dev Simplified · 7 min · English
MMamun's noteWatch all of it. He writes .then() instead of await. It is the same idea: each .then is one await.
ArticleOptional
Making network requests with JavaScriptMDN · Learn web development · 20 min · English
MMamun's noteRead "What is the problem here?" and "The Fetch API" for the bigger picture of why apps fetch data. Skip XMLHttpRequest; it is the old way.
VideoOptional
JavaScript Bangla tutorial #115: Fetch APIYouTube · Learn with Sumit · 14 min · Bangla
MMamun's noteIn Bangla. Sumit fetches data from a real API and reads the JSON. Watch it all.
03 / 10

See it step by step

From a request to a number on the screen.

Nothing in memory yet.
ScreenWeather
weather.js
1async function showDhakaWeather() {
2 screen.textContent = "Loading...";
3 const response = await fetch(url);
4 const data = await response.json();
5 screen.textContent = "Dhaka: " + data.current.temperature_2m + "°C";
6}
7showDhakaWeather();
The page calls showDhakaWeather. Nothing has been asked yet.
Step 1 / 7
04 / 10

Explanation

You want your weather page to show the real temperature in Dhaka right now. Your code doesn't know it. A server somewhere does. You need to ask it.

A server that answers questions from code, not from people, is called an API. You send a request to its address (a URL), and it sends back a response. It's like sending an SMS to a number that replies with your balance.

In JavaScript you ask with fetch. It gives back a promise, so you await it:

const url = "https://api.open-meteo.com/v1/forecast?latitude=23.81&longitude=90.41&current=temperature_2m";
const response = await fetch(url);
const data = await response.json();
console.log(data.current.temperature_2m); // 31.3

There are two waits. The first await waits for the response to start arriving. The body is still plain text in a format called JSON. It looks just like a JavaScript object. The second await, on response.json(), waits for the whole body and turns it into a real object you can use.

To find the value you need, open the URL in your browser and read the JSON. Here it looks like this:

{ "latitude": 23.8, "current": { "time": "2026-10-19T10:45", "temperature_2m": 31.3 } }

The temperature is inside current, so the path is data.current.temperature_2m.

People often forget the second await. Then data is a promise, and data.current is undefined. The other common mistake is guessing the path, like data.temperature. Don't guess. Look at the real JSON first, then follow it one dot at a time.

When you read fetch code, find three things: the URL (who you ask), the two awaits, and the path into the data. After that it's ordinary objects and arrays, and you already know map for lists.

Words to recognise
APIfetchrequestresponseJSONresponse.json()
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
1const url =
"https://api.open-meteo.com/v1/forecast" +
Mentor note · line 2
The API's address. Open-Meteo is a free weather API that needs no key.
"?latitude=23.81&longitude=90.41&current=temperature_2m";
4
5async function showDhakaWeather() {
const response = await fetch(url);
const data = await response.json();
8 // { latitude: 23.8, current: { time: "...", temperature_2m: 31.3 } }
9
const temp = data.current.temperature_2m;
11 console.log("Dhaka now: " + temp + "°C");
12}
13
14showDhakaWeather();
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 3
1async function showTemp() {
2  const response = await fetch(weatherUrl);
3  const data = response.json();
4  console.log(data.current);
5}
6showTemp();
7// The server sends: { "current": { "temperature_2m": 31.3 } }
What does this print?
DrillFind the bug2 / 3
readTemp gets the object from await response.json(). Its shape is in the comment. It should return the temperature number. Fix it so both checks pass.
1
2
3
4
5
Try 1 of 3 · solution unlocks after 3
DrillChange itOptional3 / 3
A search API sends a list of places. cityNames returns the whole place objects. Change it so it returns only the names, like ["Dhaka", "Sylhet"].
1
2
3
4
5
Try 1 of 3 · solution unlocks after 3
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What does await response.json() do?
  2. 2 / 3The JSON is { "city": "Dhaka", "current": { "temp": 31 } }. How do you get 31?
  3. 3 / 3const data = response.json(); (no await). What is data?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Fetching real data?

10 / 10

Done

You can now
Read a fetch call, say what each await waits for, and pick the right value out of the JSON.
Next: Loading and error states Back to Phase 3
On this page
  1. 01Fetching real data
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 3JavaScript for real apps
7 topics · 3–4 wks
  1. 1Arrow functions
  2. 2Destructuring and spread
  3. 3Modules and npm
  4. 4Events and handlers
  5. 5Promises and await
  6. 6Fetching real data
  7. 7Loading and error states
JourneyPhase 3Fetching real data
01 / 10Overview

Fetching real data

You'll learn to ask a server for data with fetch, turn the reply into a JavaScript object, and find the value you need.

Why it mattersWeather, cricket scores, prices, messages: almost every app shows data that lives on a server. fetch is how you get it.
about 90 min·needs: Promises and await, Objects, Arrays and map
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Article
Fetchjavascript.info · 15 min · English
MMamun's noteRead from the top until "Response headers". It uses await, just like this topic. Skip headers, POST requests and images for now.
Video
Learn Fetch API in 6 minutesYouTube · Web Dev Simplified · 7 min · English
MMamun's noteWatch all of it. He writes .then() instead of await. It is the same idea: each .then is one await.
ArticleOptional
Making network requests with JavaScriptMDN · Learn web development · 20 min · English
MMamun's noteRead "What is the problem here?" and "The Fetch API" for the bigger picture of why apps fetch data. Skip XMLHttpRequest; it is the old way.
VideoOptional
JavaScript Bangla tutorial #115: Fetch APIYouTube · Learn with Sumit · 14 min · Bangla
MMamun's noteIn Bangla. Sumit fetches data from a real API and reads the JSON. Watch it all.
03 / 10

See it step by step

From a request to a number on the screen.

Nothing in memory yet.
ScreenWeather
weather.js
1async function showDhakaWeather() {
2 screen.textContent = "Loading...";
3 const response = await fetch(url);
4 const data = await response.json();
5 screen.textContent = "Dhaka: " + data.current.temperature_2m + "°C";
6}
7showDhakaWeather();
The page calls showDhakaWeather. Nothing has been asked yet.
Step 1 / 7
04 / 10

Explanation

You want your weather page to show the real temperature in Dhaka right now. Your code doesn't know it. A server somewhere does. You need to ask it.

A server that answers questions from code, not from people, is called an API. You send a request to its address (a URL), and it sends back a response. It's like sending an SMS to a number that replies with your balance.

In JavaScript you ask with fetch. It gives back a promise, so you await it:

const url = "https://api.open-meteo.com/v1/forecast?latitude=23.81&longitude=90.41&current=temperature_2m";
const response = await fetch(url);
const data = await response.json();
console.log(data.current.temperature_2m); // 31.3

There are two waits. The first await waits for the response to start arriving. The body is still plain text in a format called JSON. It looks just like a JavaScript object. The second await, on response.json(), waits for the whole body and turns it into a real object you can use.

To find the value you need, open the URL in your browser and read the JSON. Here it looks like this:

{ "latitude": 23.8, "current": { "time": "2026-10-19T10:45", "temperature_2m": 31.3 } }

The temperature is inside current, so the path is data.current.temperature_2m.

People often forget the second await. Then data is a promise, and data.current is undefined. The other common mistake is guessing the path, like data.temperature. Don't guess. Look at the real JSON first, then follow it one dot at a time.

When you read fetch code, find three things: the URL (who you ask), the two awaits, and the path into the data. After that it's ordinary objects and arrays, and you already know map for lists.

Words to recognise
APIfetchrequestresponseJSONresponse.json()
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
1const url =
"https://api.open-meteo.com/v1/forecast" +
Mentor note · line 2
The API's address. Open-Meteo is a free weather API that needs no key.
"?latitude=23.81&longitude=90.41&current=temperature_2m";
4
5async function showDhakaWeather() {
const response = await fetch(url);
const data = await response.json();
8 // { latitude: 23.8, current: { time: "...", temperature_2m: 31.3 } }
9
const temp = data.current.temperature_2m;
11 console.log("Dhaka now: " + temp + "°C");
12}
13
14showDhakaWeather();
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 3
1async function showTemp() {
2  const response = await fetch(weatherUrl);
3  const data = response.json();
4  console.log(data.current);
5}
6showTemp();
7// The server sends: { "current": { "temperature_2m": 31.3 } }
What does this print?
DrillFind the bug2 / 3
readTemp gets the object from await response.json(). Its shape is in the comment. It should return the temperature number. Fix it so both checks pass.
1
2
3
4
5
Try 1 of 3 · solution unlocks after 3
DrillChange itOptional3 / 3
A search API sends a list of places. cityNames returns the whole place objects. Change it so it returns only the names, like ["Dhaka", "Sylhet"].
1
2
3
4
5
Try 1 of 3 · solution unlocks after 3
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What does await response.json() do?
  2. 2 / 3The JSON is { "city": "Dhaka", "current": { "temp": 31 } }. How do you get 31?
  3. 3 / 3const data = response.json(); (no await). What is data?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Fetching real data?

10 / 10

Done

You can now
Read a fetch call, say what each await waits for, and pick the right value out of the JSON.
Next: Loading and error states Back to Phase 3
On this page
  1. 01Fetching real data
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read

You want your weather page to show the real temperature in Dhaka right now. Your code doesn't know it. A server somewhere does. You need to ask it.

A server that answers questions from code, not from people, is called an API. You send a request to its address (a URL), and it sends back a response. It's like sending an SMS to a number that replies with your balance.

In JavaScript you ask with fetch. It gives back a promise, so you await it:

const url = "https://api.open-meteo.com/v1/forecast?latitude=23.81&longitude=90.41&current=temperature_2m";
const response = await fetch(url);
const data = await response.json();
console.log(data.current.temperature_2m); // 31.3

There are two waits. The first await waits for the response to start arriving. The body is still plain text in a format called JSON. It looks just like a JavaScript object. The second await, on response.json(), waits for the whole body and turns it into a real object you can use.

To find the value you need, open the URL in your browser and read the JSON. Here it looks like this:

{ "latitude": 23.8, "current": { "time": "2026-10-19T10:45", "temperature_2m": 31.3 } }

The temperature is inside current, so the path is data.current.temperature_2m.

People often forget the second await. Then data is a promise, and data.current is undefined. The other common mistake is guessing the path, like data.temperature. Don't guess. Look at the real JSON first, then follow it one dot at a time.

When you read fetch code, find three things: the URL (who you ask), the two awaits, and the path into the data. After that it's ordinary objects and arrays, and you already know map for lists.

Words to recognise
APIfetchrequestresponseJSONresponse.json()

You want your weather page to show the real temperature in Dhaka right now. Your code doesn't know it. A server somewhere does. You need to ask it.

A server that answers questions from code, not from people, is called an API. You send a request to its address (a URL), and it sends back a response. It's like sending an SMS to a number that replies with your balance.

In JavaScript you ask with fetch. It gives back a promise, so you await it:

const url = "https://api.open-meteo.com/v1/forecast?latitude=23.81&longitude=90.41&current=temperature_2m";
const response = await fetch(url);
const data = await response.json();
console.log(data.current.temperature_2m); // 31.3

There are two waits. The first await waits for the response to start arriving. The body is still plain text in a format called JSON. It looks just like a JavaScript object. The second await, on response.json(), waits for the whole body and turns it into a real object you can use.

To find the value you need, open the URL in your browser and read the JSON. Here it looks like this:

{ "latitude": 23.8, "current": { "time": "2026-10-19T10:45", "temperature_2m": 31.3 } }

The temperature is inside current, so the path is data.current.temperature_2m.

People often forget the second await. Then data is a promise, and data.current is undefined. The other common mistake is guessing the path, like data.temperature. Don't guess. Look at the real JSON first, then follow it one dot at a time.

When you read fetch code, find three things: the URL (who you ask), the two awaits, and the path into the data. After that it's ordinary objects and arrays, and you already know map for lists.

Words to recognise
APIfetchrequestresponseJSONresponse.json()