Skip to content
WANCODE
BM

Weather Dashboard (with Sample Data)

1.5 hIntermediateJavaScriptfetchasync/awaitJSONError handling

Outcome

A dashboard where you search “Kuching” and get current conditions plus a 3-day forecast — with a loading message, a friendly “city not found”, and graceful recovery from network errors.

Learning objectives

  • Request a JSON file with fetch and read it with await response.json()
  • Search nested data with find and render it into the DOM
  • Design the three states every request has: loading, success and failure
  • Handle HTTP errors (response.ok) and network errors (try/catch) without crashing

Prerequisites

Expected behaviour

  • Searching “kuching” (any capitalisation, extra spaces OK) shows Kuching's temperature, condition and details.
  • Below it, three forecast cards show each day's high/low and chance of rain.
  • While the data loads, a status message says so; it disappears when the weather appears.
  • An unknown city shows a friendly “not found” message; with “Simulate a network error” ticked, a friendly error appears instead of a crash.

This project uses sample data

The forecasts in data.json are made-up sample data for learning — not real weather. The preview has no internet access, so fetch("data.json") is answered from the project file (with a small delay so it feels like a real request). Any other URL fails, which is exactly how we'll practise error handling.

Real weather apps work the same way: the browser sends a request, waits, and gets JSON back — or an error. Your code can't know how long that takes, which is why fetch returns a Promise and we use async/await.

A request goes out, a response comes back. Sometimes it doesn't — plan for both.
JavaScript
async function loadWeather(url) {
  const response = await fetch(url);      // wait for the server
  if (!response.ok) throw new Error("HTTP " + response.status);
  return response.json();                 // wait for the body, parse JSON
}

The core of the project. Every line matters — you'll build it in Milestones 1 and 5.

About real weather APIs (and API keys)

  • Real weather APIs need network access, and many require an API key — a secret string that identifies (and often bills) your account.
  • Never put an API key in front-end code. Anything in your HTML or JavaScript can be read by anyone with View Source or DevTools. Keep keys on a server (or a serverless function) that calls the API for you.
  • When you run this project on your own computer, you can adapt it to a free public API. For example, Open-Meteo currently offers a free forecast API for non-commercial use without a key — check its terms first. Its JSON has a different shape, so write a small function that converts it into the same structure as data.json.

Milestones

Open data.json and look at its shape: a cities array, each with current and forecast.

Then complete loadWeather(url) in script.js:

1. await fetch(url) to get a response. 2. return response.json() — the parsed data.

Quick test: add loadWeather().then((data) => console.log(data.cities.length)); at the bottom of script.js — the console should print 4. Remove the line afterwards.

Checks

  • loadWeather() returns a Promise
  • It resolves to the parsed JSON with 4 cities
Completion checklist

Tick these when they're true for your project. The project completes when every milestone passes and every item is ticked.

Preview

Console output from your code appears here.

Step 1 of 5