JSON — Data as Text

By the end of this lesson you will be able to:

1. Turn a JSON string into a real object with JSON.parse().
2. Reach a value nested two levels deep, such as the temperature in KL.
3. Replace the parse step with response.json() in a fetch chain.
4. Spot the three rules that make JSON stricter than JavaScript.

Here is the body you fetched last lesson, shortened. The temperature is clearly in there.

const body = '{"timezone":"GMT","current":{"temperature_2m":29.8}}';

console.log(body.current);
console.log(body.length);

Predict together

• What does body.current give you?
• Why does body.length work when body.current does not?

undefined
51

Two people who speak different languages can still share a recipe if they agree to write it in one agreed format. Computers have the same problem, and the same solution.

That format is JSON — JavaScript Object Notation. It looks like a JavaScript object, but it is only ever text. Every language can read it, which is why every API speaks it.

JSON is stricter than JavaScript

const dish = {
  name: 'Nasi lemak',
  price: 5.5,
  spicy: true,
};

{
  "name": "Nasi lemak",
  "price": 5.5,
  "spicy": true
}

Three rules catch everybody out at least once:

1. Double quotes only — on keys and on strings. Single quotes are invalid JSON.
2. No trailing comma after the last item in an object or array.
3. No comments, and no functions. JSON holds data, nothing else.

Allowed values are strings, numbers, true, false, null, arrays and objects. That is the whole list.

Text in, object out

const text = '{"name":"Roti canai","price":1.5}';

const dish = JSON.parse(text);

console.log(dish.price);

1.5

JSON.parse() reads the text and builds a real object. Now every trick from Lesson 11 works on it.

The reverse is JSON.stringify(), which turns an object back into text. You will need it in Level 3 when you send data to a server.

Reaching into nested data

Real API data is objects inside objects, and arrays inside those. You walk down with dots and square brackets — Lessons 9 and 11, unchanged.

{
  "current": { "temperature_2m": 29.8 },
  "hourly": {
    "time": ["2026-08-08T00:00", "2026-08-08T01:00"],
    "temperature_2m": [24.3, 26.2]
  }
}

const now = data.current.temperature_2m;
const firstHour = data.hourly.temperature_2m[0];
const firstTime = data.hourly.time[0];

Notice how hourly works: two parallel arrays. Position 0 of one lines up with position 0 of the other. Many APIs do this.

The shortcut you will always use

Fetching and parsing go together so often that Response has a method for both.

fetch(url)
  .then((response) => response.json())
  .then((data) => {
    console.log(data.current.temperature_2m);
  });

response.json() reads the body and parses it. It replaces .text() followed by JSON.parse(). From here on, use it.

Why it matters

Every API you meet for the rest of your life will hand you JSON. The moment it becomes an object, all your existing skills apply — and in React you will feed exactly this shape into a list on screen.

Carry on in weather.html and app.js from last lesson. Run it with Live Server.

Step 1 — Parse it by hand, once

fetch(url)
  .then((response) => response.text())
  .then((body) => {
    const data = JSON.parse(body);
    console.log(data);
  });

Look in the console. Instead of a string you now get a foldable object with triangles to open. That is how you know it worked.

Step 2 — Reach the temperature

.then((body) => {
  const data = JSON.parse(body);

  const temperature = data.current.temperature_2m;
  const unit = data.current_units.temperature_2m;

  output.textContent = `${temperature} ${unit}`;
});

29.8 °C

The units come from the API too, so the page stays correct even if the service changes them.

Step 3 — Drop the middle step

fetch(url)
  .then((response) => response.json())
  .then((data) => {
    const temperature = data.current.temperature_2m;
    const unit = data.current_units.temperature_2m;

    output.textContent = `${temperature} ${unit}`;
  });

What changed? .text() became .json() and the JSON.parse line vanished. Same result, one step fewer.

Step 4 — Ask for the hourly forecast too

Add one more setting to the end of your URL:

const url = 'https://api.open-meteo.com/v1/forecast?latitude=3.14&longitude=101.69&current=temperature_2m&hourly=temperature_2m';

Reload and open data.hourly in the console. Two arrays, side by side, hundreds of entries long.

Step 5 — Show the first three hours

const times = data.hourly.time;
const temps = data.hourly.temperature_2m;

for (let i = 0; i < 3; i += 1) {
  const li = document.createElement('li');
  li.textContent = `${times[i]} — ${temps[i]} ${unit}`;
  list.append(li);
}

2026-08-08T00:00 — 24.3 °C
2026-08-08T01:00 — 26.2 °C
2026-08-08T02:00 — 29.2 °C

Add <ul id="list"></ul> to your HTML and select it first. The loop is Lesson 7 and createElement is Lesson 15 — the only new part is where the data came from.

One index, two arrays. That is the parallel-array idea doing real work.

Keep building your weather page.

1. Task 1 — Say when

   Show the reading time as well, from data.current.time. Put it under the temperature in its own paragraph.

2. Task 2 — Print it tidily

   Log JSON.stringify(data, null, 2) and compare it with plain JSON.stringify(data).

   The 2 is how many spaces to indent by. Write one sentence on when each version is more useful.

3. Task 3 — Six hours, and the warmest

   Show the first six hours in your list instead of three. Then work out which of those six is warmest and mark it.

   A loop with a “highest so far” variable will do it — Lesson 7 again. Keep the two arrays in step.

Hafiz wrote his stall menu as JSON by hand. Nothing appears, and the console is angry. Find three mistakes.

// hafiz-menu.js — buggy
const text = `{
  'stall': 'Warung Hafiz',
  'dishes': [
    { 'name': 'Nasi lemak', 'price': 5.5 },
    { 'name': 'Roti canai', 'price': 1.5 },
  ]
}`;

const menu = JSON.parse(text);
console.log(menu.dishes.price);

It works if: the console logs 5.5 — the price of the first dish — with no error.

SyntaxError: Expected property name or '}' in JSON at position 4

// hafiz-menu.js — fixed
const text = `{
  "stall": "Warung Hafiz",
  "dishes": [
    { "name": "Nasi lemak", "price": 5.5 },
    { "name": "Roti canai", "price": 1.5 }
  ]
}`;

const menu = JSON.parse(text);
console.log(menu.dishes[0].price);

• JSON is text that looks like a JavaScript object. Every language reads it.
• Double quotes only · no trailing comma · no comments or functions.
• JSON.parse(text) gives you a real object; JSON.stringify(obj) goes back.
• response.json() does the fetch-and-parse in one — use it instead of .text().
• Walk into nested data with dots, and into arrays with [0].
• Parallel arrays line up by index: time[2] belongs with temperature_2m[2].
• A value you cannot reach usually means you are one level too high or too low.

New words

• JSON — JavaScript Object Notation, the text format APIs speak.
• Parse — read text and build a real value from it.
• Stringify — the reverse: turn a value into text.
• Parallel arrays — two lists whose positions correspond.

Where this is going

You have now written .then() a dozen times without knowing what it really is. Next lesson opens it up: promises, their three states, and how to catch one that fails.