Displaying API Data in JavaScript

In our previous lesson, we learned how to fetch data from an API using JavaScript. Now, we’re going to take it a step further by learning how to display this data on our webpage. To make it simple, we'll use a fun and easy API: the Dog CEO's Dog API, which gives us random dog images. Imagine it like having a magic box that gives you a new dog picture every time you ask for it!

By the end of this lesson, you'll understand:

How to fetch data from an API.
How to display that fetched data on your webpage.

1. Setting Up the HTML

First, let’s set up a basic HTML file. This file will contain a place to show our dog image. Think of this like setting up a blank photo frame where we will put our picture later.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dog Image App</title>
</head>
<body>
<h1>Random Dog Image</h1>
<!-- Placeholder for the dog image -->
<img id="dog-image" alt="Random Dog" width="300" />
<script src="app.js"></script>
</body>
</html>

In this HTML file:

The <img> tag: This is where we’ll show the dog image. It’s like our empty picture frame with an ID of `dog-image` so we can find it later with JavaScript.
The `id="dog-image"`: This ID helps us target the image element from our JavaScript code. It's like giving our photo frame a name so we know exactly which one to update.

2. Writing the JavaScript to Fetch and Display Data

Next, let’s write some JavaScript to fetch a random dog image from our API and put it into our HTML page. Imagine this like calling a friend (the API) to get a dog picture and then placing that picture into our photo frame (HTML).


const apiUrl = 'https://dog.ceo/api/breeds/image/random';
const dogImageElement = document.getElementById('dog-image');

fetch(apiUrl)
.then(response => response.json())
.then(data => {
dogImageElement.src = data.message;
})
.catch(error => {
console.error('Error fetching data:', error);
});

Let’s break down this JavaScript code:

Define the API URL: We set `apiUrl` to the endpoint that gives us a random dog image. Think of this URL as the address of the store where we’re buying our picture.
Select the HTML Element: We use `document.getElementById('dog-image')` to grab our image placeholder from the HTML. It’s like finding the specific photo frame in our room where we want to put the new picture.
Fetch Data: We use `fetch(apiUrl)` to request the data from the API. This is like placing an order for the picture from the store. Once we get a response, we convert it to JSON with `response.json()`, just like opening the package to see what’s inside.
Update the Image Source: We set the `src` attribute of the <img> element to the URL of the dog image received from the API. This step is like putting the new picture into the frame.
Handle Errors: If something goes wrong, we catch the error with `.catch()` and log it to the console. It’s like calling the store to ask why our picture didn’t arrive.

3. How It All Connects

This lesson builds on our previous knowledge of fetching data:

Fetching Data Recap: We previously learned how to use the `fetch` method to get data from an API and handle the response. This is the same method we’re using to get our dog image.
Displaying Data: Now, we’re using that fetched data to update our HTML. We’re turning the data we got into something visual on our page, similar to how we filled in our empty photo frame.

Think of fetching data as getting a delivery from the store, and displaying data as putting that delivery on display for everyone to see.

4. What Happens When the Code Runs

Here’s a step-by-step of what happens when you load the webpage:

The JavaScript code runs and fetches a random dog image from the API.
The code waits for the response to come back. This is like waiting for our delivery to arrive.
Once the data arrives, JavaScript updates the `src` attribute of the <img> tag with the URL of the dog image. This step puts the picture into our photo frame.

5. Full Example (HTML + JavaScript)

Here’s a complete example that combines HTML and JavaScript:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dog Image App</title>
</head>
<body>
<h1>Random Dog Image</h1>
<img id="dog-image" alt="Random Dog" width="300" />
<script>
const apiUrl = 'https://dog.ceo/api/breeds/image/random';
const dogImageElement = document.getElementById('dog-image');

fetch(apiUrl)
.then(response => response.json())
.then(data => {
dogImageElement.src = data.message;
})
.catch(error => {
console.error('Error fetching data:', error);
});
</script>
</body>
</html>

6. Key Takeaways

Fetch Data with JavaScript: The `fetch` method is used to get data from an API. It’s a powerful tool for working with remote data.
Display Data with JavaScript: Once we have the data, we update our HTML elements to show this data. This makes our webpage dynamic and interactive.

With these skills, you can now fetch and display data from APIs, making your web pages more engaging and responsive to real-time information.

7. Practice Challenge

Try using a different API to fetch and display other types of data, such as random quotes or fun facts. This will help you get comfortable with working with different kinds of data and APIs.