Integrating Third-Party APIs in HTML

Tutorial 5 of 5

Introduction

In this tutorial, we will learn how to integrate third-party APIs into an HTML document. An API, or Application Programming Interface, is a set of rules that allows different software applications to communicate with each other. By integrating third-party APIs, you can leverage other platforms' functionality and data into your web page, enhancing its capabilities and content.

By the end of this tutorial, you will be able to:
- Understand what an API is and how it works.
- Fetch data from a third-party API.
- Display this data in your HTML document.

Prerequisites: Basic knowledge of HTML, CSS, JavaScript, and AJAX.

Step-by-Step Guide

1. Understanding APIs
APIs provide a way for applications to interact with each other. To use an API, you can send a request to it, detailing what information you need. The API will then return the requested data.

2. Fetching Data
We'll use JavaScript's fetch function to send a request to an API. The fetch function returns a Promise that resolves to the Response object representing the response to the request.

3. Displaying Data
Once we have the data from the API, we'll use JavaScript to insert it into our HTML document.

Code Examples

Example 1: Fetching data from an API

Here's an example where we fetch data from the JSONPlaceholder API, a free fake API for testing and prototyping.

// Use the fetch function to send a request to the API
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json()) // Convert the response data to JSON
  .then(json => console.log(json)) // Log the data to the console
  .catch(error => console.log('Error:', error)); // Log any errors

Example 2: Displaying API data in an HTML document

In this example, we'll fetch a user from the JSONPlaceholder API and display their username in an HTML document.

<!DOCTYPE html>
<html>
<body>
  <h2>User</h2>
  <p id="username">Loading...</p>

  <script>
    // Fetch a user from the API
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then(response => response.json())
      .then(user => {
        // Get the 'username' paragraph
        const usernameParagraph = document.getElementById('username');
        // Set the text of the 'username' paragraph to the user's username
        usernameParagraph.textContent = user.username;
      })
      .catch(error => console.log('Error:', error));
  </script>
</body>
</html>

Summary

In this tutorial, we learned what an API is and how to use one. We also learned how to fetch data from a third-party API using the fetch function and how to display this data in an HTML document.

Practice Exercises

Exercise 1: Fetch a list of posts from the JSONPlaceholder API and display their titles in an HTML document.

Exercise 2: Fetch a list of users from the JSONPlaceholder API. For each user, display their name and email in an HTML document.

These exercises will help you get more practice with fetching data from an API and displaying it in an HTML document. Happy coding!