Tags: #lesson #level2 #javascript #dom #api
Goal: Update your HTML document with real-time data from API calls, replacing test data with live weather information.
Tools: VS Code, Git, web browser, DevTools (Console + Network)
In this lesson, you will continue your work from lesson 5, but now you’ll learn how to update your HTML document with data from the API call. We’ll create a clean separation of concerns by having one function handle the API call and another function handle updating the page.
Separation of Concerns means we’ll split our code into logical parts:
updateWeatherCard functionThis approach makes your code more maintainable and easier to debug.
updateWeatherCardsetText)Why this matters: By creating a separate function for page updates, we keep our code organized and follow the single responsibility principle. This function will handle all the DOM manipulation, making it easier to debug and maintain. You can call it from anywhere in your code when you need to refresh the weather display.
Show me:
function updateWeatherCard() {
setText("temp", newOrleansWeather.current.temperature);
setText("windSpeed", newOrleansWeather.current.windSpeed);
}
fetchNewOrleansWeather functionconsole.log(results) or similar.then((result) => console.log(result)) with this expanded version:.then(function(result){
console.log(result);
})
Why this matters: We’re expanding the arrow function to a full function declaration to make it easier to add more logic later. This change gives us more flexibility to add multiple lines of code inside the .then() block. The expanded syntax is also more readable and easier to debug when things go wrong.
Test immediately: Make sure your function still works after this change.
💡 Arrow functions vs. traditional functions? Check our Promise Reference Guide for the differences and when to use each.
📸 [Screenshot: Console showing the expanded .then() function working]
.then((response) => response.text()) in your fetchNewOrleansWeather function.then((response) => response.json())Why this matters: The API returns JSON data, but response.text() gives us a string that we’d have to parse manually. Using response.json() automatically converts the response to a JavaScript object, making it much easier to work with. This eliminates the need for JSON.parse() and prevents parsing errors.
Test immediately: Call your function and verify you get a JavaScript object in the console, not a string.
💡 Why do we need
.then()? See our Promise Reference Guide for the network latency explanation.
.then((response) => response.json())
.then(function(result){
console.log(result);
})
📸 [Screenshot: Console showing JavaScript object instead of string response]
.then() function, assign the result to your data variable.then((response) => response.json())
.then(function(result){
console.log(result);
newOrleansWeatherData = result;
console.log(newOrleansWeatherData);
console.log(newOrleansWeatherData.current.temperature);
})
Why this matters: Now we’re storing the API response in a variable so we can use it throughout our code. By logging the data and accessing specific properties like temperature, we verify that the API is returning the expected structure. This step ensures we have valid data before trying to update the page, preventing errors from undefined or malformed data.
Test immediately: Verify you can see the temperature in the console.
📸 [Screenshot: Console showing the data variable assignment and temperature access]
updateWeatherCard function after you set your newOrleansWeatherData variableWhy this matters: This is where the magic happens - we’re connecting our API data to the actual webpage. The order is crucial because we need valid data before we can update the display. By reusing the same variable names from Lesson 3, we ensure our updateWeatherCard function can find and use the data correctly. This step transforms your app from showing static test data to displaying live, real-time weather information.
Test immediately: Check that your page updates with the real weather data.
📸 [Screenshot: Page showing updated weather information from API]
var weatherData = {} or just a declaration var weatherData;Why this matters: Cleaning up old test data prevents confusion and keeps your code focused on the real functionality. The test data was just a placeholder to help you build the UI structure, but now your app is pulling live data from the weather API. Removing unused code makes your project more professional and easier for other developers to understand.
Show me:
var newOrleansWeather = {};
Why this matters: Once you’ve successfully updated one city, you’ve created a pattern that can be applied to all cities. This repetition reinforces the concept and shows how good code structure makes scaling easier. By testing each city individually, you ensure that your refactoring didn’t break any existing functionality and that each city can fetch and display its own weather data.
📸 [Screenshot: Multiple city functions updated with the new pattern]
Here’s how your complete function should look:
Optional Challenge: Add a button in your index.html for each of the cities. Each button will get the data for a different city.
Advanced Challenge: Examine the catch statement in your generated code. This is called if there are errors in the API call.
What to do:
Why this matters: Real-world apps need to handle errors gracefully. Users should see helpful messages like “Unable to load weather data” instead of technical errors or blank screens.
💡 Tip: Look at the .catch() block in your generated code and think about how to use it to update the page with error information.
📚 References:
then methodYou’ve successfully integrated network calls with DOM updates:
📚 Reference: Promise Reference Guide - Essential reading for understanding promises, arrow functions, and async JavaScript!