Accessing remote APIs

Learning Goals

At the end of this Tutorial, you will be able to:

• Connect to public, third-party APIs using the fetch() method.
• Understand how APIs provide image data as URL strings.
• Extract nested data from complex JSON objects.
• Dynamically output mixed text and image data to the DOM.

Introduction to remote APIs

In the previous tutorial, you successfully used the Fetch API to load data from a local JSON file such as data/products.json. That is a great start, but the real power of JavaScript is its ability to communicate with live servers across the Internet.

A web API (Application Programming Interface) is essentially a URL that, instead of returning an HTML web page meant for humans, returns raw data (usually in JSON format) to be parsed by JavaScript or other code.

 const response = await fetch("REMOTE_URL_ENDPOINT_GOES_HERE"); 

The error-handling techniques you learned in the previous tutorial will still work exactly the same way — you are simply changing the URL string from a local file path to a remote web address.

In your own JSON files, you had control the structure. However, remote APIs may contain nested objects and arrays within objects that require more careful parsing.

Working with the REST Countries API

Let's begin with a simple example that uses the REST Countries API with a remote URL of https://restcountries.com/v3.1/region/europe. Follow these steps:

1. Copy the most basic form of a Fetch API function below to your list-remote.js script file.

   Copy 
   async function fetchCountriesData() {
       // Fetch the resource and get a Response (status, headers, body stream)
       const response = await fetch("https://restcountries.com/v3.1/region/europe");
       // Parse the response object to JSON
       const data = await response.json();
       // Verify the code is working by logging the data to the console
       console.log(data);
   }
   
   // Fetch the countries immediately when the page loads
   fetchCountriesData();

2. Run the list-remote.html web page from a local server. In your browser console, you can see that the response is complex in structure and detailed in content.

Parsing and displaying the response

Next, let's output some of the data to a web page. (You don't need to 'consume' all the data in a Fetch API response.)

1. In your list-remote.html web page, add a <div> tag with an id of remote-data-container.
2. In your list-remote.js script, add the following function.

   Copy function displayCountriesData(countriesArray) {
       const container = document.getElementById("remote-data-container");
       let htmlOutput = "";
   
       countriesArray.forEach(country => {
           htmlOutput += `
               <p>
               <b>${country.name.common}</b><br>
               Capital: ${country.capital[0]}<br>
               Population: ${country.population.toLocaleString()}<br>
               Region: ${country.region}
               </p>
               <p>------------------</p>
           `;
       });
       container.innerHTML = htmlOutput;
   }

3. Call this display function from inside your fetchCountriesData() function.
4. You browser should show something like the following:

Note that some of the response properties are simpler to parse than others.

• The region property key is just that - region. You can access it simply by typing the loop variable and the property name: country.region. The same is true for population. You can make this property more readable by adding a .toLocaleString() method.
• However, the name is a nested object instead of a simple string. So to access it you need to write country.name.common rather than just country.name.
• The capital is not a string but an array. So you would write country.capital[0] to get the first (usually only) value.

Understanding image URLs in JSON

APIs often provide URLs for images. That is, the JSON data contains a URL string pointing to where the image lives on the internet.

Note that an API does not send actual image files (like .jpg or .png files) in their JSON responses.

In your .forEach() loop above, add this new line to display the flag of the various countries:

Copy 
<p><img src="${country.flags.png}" alt="Flag of ${country.name.common}" width="50"></p>    

This code injects the URL string of each image into the src attribute of a standard HTML <img> tag. Your browser output should look similar to that below.

♿ Accessibility Tip: Note we're using dynamic alt text. This makes the page usable for screen reader users.

Attaching the HTML output to a button

In the above sample, the remote data is displayed on the loading of the list-remote.html web page. Let's instead attach the displayCountriesData(countriesArray) function to a button.

Start by adding some CSS styles to the <head> of your web page.

Copy <style>
        body { font-family: Arial, sans-serif; margin: 0 auto; }
        h1 { color: #333; text-align:center }
        p { margin: 10px 0; font-size: 18px }
        #remote-data-container { max-width: 80%; margin: 20px auto; padding: 20px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 5px }
        #button-container { text-align: center; margin-bottom: 20px }
        .btn {
            display: inline-block; padding: 10px 20px; font-weight: bold;
            color: #fff; background-color: #007BFF;
            border: none; border-radius: 5px; cursor: pointer;
            font-size: 18px; transition: background-color 0.3s ease;
        }
        .btn:hover { background-color: #0056b3; }
        img { display: block; margin: 10px 0; }
</style>

Next, add an <h1> element and a button container <div> to your web page (so we can use event delegation). Insert a single button to call the display countries function.

Copy <h1>Display remote data</h1>
    <div id="button-container">
        <button class="btn" id="btn-countries">Load Countries</button>
    </div>

Replace everything in your list-remote.js script with the following

Copy 
// Fetch function
async function fetchCountriesData() {
    try {
        const response = await fetch("https://restcountries.com/v3.1/region/europe");
        if (!response.ok) {
            console.log(`Network response was not ok - Status: ${response.status}`);
            return;
        }
        const data = await response.json();
        console.log(data);
        // Verify the code is working by logging the data to the console
        console.log(data);
        // Call the display function
        displayCountriesData(data);
    } catch (error) {
        const container = document.getElementById("remote-data-container");
        container.innerHTML = '<p class="error">⚠️ Failed to load data. Please try again later.</p>';   
        console.error(`Error fetching data: ${error}`);
    }
}

// Display function
function displayCountriesData(countriesArray) {
    const container = document.getElementById("remote-data-container");
    let htmlOutput = "";

    countriesArray.forEach(country => {
        htmlOutput += `
        <p><img src="${country.flags.png}" alt="Flag of ${country.name.common}" width="50"></p>
            <p>
            <b>${country.name.common}</b><br>
            Capital: ${country.capital[0]}<br>
            Population: ${country.population.toLocaleString()}<br>    
            Region: ${country.region}
            </p>
            <p>------------------</p>
        `;
    });

    container.innerHTML = htmlOutput;
}

// Event listener on the parent container
document.getElementById("button-container").addEventListener("click", function(e) {
    if (e.target.id === "btn-countries") {
        fetchCountriesData();
    }
});

Working with the JSON Placeholder API

Now add a second Fetch API snippet to our web page and script files. The endpoint https://jsonplaceholder.typicode.com/users returns 10 random and fausers.

Follow these steps:

1. Update your list-remote.html web page with a second button.

   Copy <button class="btn" id="btn-users">Load Users</button>

2. In your list-remote.js file, update your event delegation function.

   Copy // Event listener on the parent container
   document.getElementById("button-container").addEventListener("click", function(e) {
       if (e.target.id === "btn-countries") {
           fetchCountriesData();
       } else if (e.target.id === "btn-users") {
           fetchUsersData();   
       }
   }); 

3. In the same script file, copy and paste the fetchCountriesData() function, and update it as shown below.
4. Add the code below to display the fetched user data.

   Copy function displayUsersData(usersArray) {
       const container = document.getElementById("remote-data-container");
       let htmlOutput = "";
       usersArray.forEach(user => {
           htmlOutput += `
               <p>
               <b>${user.name} ${user.username}</b><br>
               Email: <a href="mailto:${user.email}">${user.email}</a><br>
               Website: <a href="http://${user.website}" target="_blank">${user.website}</a><br>
               Location: ${user.address.street}, ${user.address.city}
               </p>
           `;
       });
       container.innerHTML = htmlOutput;
   } 

You should now see a list of random users when you click the Load Users button.

Adding a grid layout

To make the returned country and user data look more organised, you can use a CSS grid layout. This allows you to display each data item in a responsive grid that adjusts based on the screen size.

Begin in your list-remote.html web page by updating the container for displaying the remote data.

Copy 
<div id="remote-data-container" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;"></div>

Next, in your list-remote.js file, update the HTML output for the country display function to wrap each country and user card in a styled <div> element.

Copy htmlOutput += `
    <div style="border: 1px solid #ccc; padding: 12px; border-radius: 6px;"><img src="${country.flags.png}" alt="Flag of ${country.name.common}" width="100">
         <p>
            <b>${country.name.common}</b><br>
            Capital: ${country.capital[0]}<br>
            Population: ${country.population.toLocaleString()}<br>            
            Region: ${country.region}
         </p>
    </div>
`;

Update the user display function in a similar way.

Copy htmlOutput += `
    <div style="border: 1px solid #ccc; padding: 12px; border-radius: 6px;">
       <p>
       <b>${user.name} ${user.username}</b><br>
        Email: <a href="mailto:${user.email}">${user.email}</a><br>
        Website: <a href="http://${user.website}" target="_blank">${user.website}</a><br>
        Location: ${user.address.street}, ${user.address.city}
       </p>
    </div>
`;

Finally, add this new CSS style to the <head> of your HTML file:

Copy #remote-data-container p { line-height: 1.5 }

In your web browser, confirm that the country and user data are displayed in a grid layout.