Fetching and Displaying Data in HTML

Introduction

In this tutorial, we aim to guide you on how to fetch data from an API and display it dynamically in your HTML document. You will learn how to use the Fetch API to retrieve data from an API, and then use JavaScript and HTML to display that data on a webpage.

Prerequisites for this tutorial include a basic understanding of HTML, CSS, and JavaScript, as well as familiarity with JSON data format and APIs.

Step-by-Step Guide

This tutorial will walk you through the process of fetching data from an API and displaying it in your HTML document. This process involves making a request to an API, parsing the returned data, and then dynamically creating HTML elements to display the data.

Fetch API

The Fetch API provides an interface for fetching resources (including across the network). It will return a promise that resolves to the Response to that request, whether it is successful or not.

JSON

JSON, or JavaScript Object Notation, is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. APIs often return data in JSON format.

Dynamically Creating HTML elements

Once you have your data, you can use JavaScript to dynamically create HTML elements and display the data on your webpage.

Code Examples

Example 1: Fetching data from an API

In this example, we'll fetch data from a placeholder API, which provides dummy data for testing and prototyping.

// Fetch data from API
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json()) // Parse the data as JSON
  .then(data => console.log(data)) // Log the data to the console
  .catch(err => console.error('An error occurred.', err)); // Log any errors

Example 2: Displaying the data in HTML

Here's how you might display the data from the previous example in your HTML document.

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    data.forEach(post => {
      // Create a new div element for each post
      let div = document.createElement('div');

      // Create a new h2 element for the post title
      let title = document.createElement('h2');
      title.textContent = post.title;

      // Create a new p element for the post body
      let body = document.createElement('p');
      body.textContent = post.body;

      // Append the h2 and p to the div
      div.appendChild(title);
      div.appendChild(body);

      // Append the div to the body of the document
      document.body.appendChild(div);
    });
  })
  .catch(err => console.error('An error occurred.', err));

Summary

You've learned how to fetch data from an API using the Fetch API and display it dynamically in your HTML document using JavaScript. As next steps, you could explore other APIs, work with more complex data, or add more interactivity to your webpage.

Practice Exercises

1. Fetch data from the 'https://jsonplaceholder.typicode.com/users' endpoint and display each user's name and email in your HTML document.

2. Fetch data from the 'https://jsonplaceholder.typicode.com/comments' endpoint and display each comment's name, email, and body in your HTML document.

3. Fetch data from the 'https://jsonplaceholder.typicode.com/albums' endpoint and display each album's title and the titles of the first three photos in that album in your HTML document.

You can find solutions to these exercises and more practice exercises on the JSONPlaceholder website.