Technical Lesson: External API and Fetching

Introduction

In this lesson, we’ll walk through the steps of fetching data from an external API and dynamically updating the web page with the results. This involves making asynchronous requests, handling responses, and ensuring the data is properly processed and displayed.

A software company wants to enhance user experience by displaying live data from external sources (e.g., weather updates, stock prices, or astronaut information). The goal is to build a system where the web page fetches and displays data without requiring a full page reload, simulating a typical problem encountered in modern web applications.

Tools & Resources

You will need the following tools and resources to complete this technical lesson:

• Javascript Environment: Node.js
• Text Editor: VS Code
• GitHub Repo: Technical Lesson- External API and Fetching

Set Up

1. Fork and Clone the Repository:
   • Go to the provided GitHub repository link.
   • Fork the repository to your GitHub account.
   • Clone the forked repository to your local machine.
   • Open the project in VSCode.
   • Run npm install to install all necessary dependencies.

Instructions

1. Define the Problem:

Allow a web page to fetch data from an external API and update its content dynamically.

• User Action: Display a list of astronauts currently in space by fetching data from an API.
• Constraints: Ensure the request is made asynchronously, handle potential errors, and display the data in a user-friendly format.

2. Design and Develop the Code:

   • Step 1: Identify Data Requirements

     • We need to fetch data about astronauts currently in space from a public API. The API endpoint http://api.open-notify.org/astros.json provides this data in JSON format.

   • Step 2: Write the fetch() Request

     • We use the fetch() function to send an HTTP request to the API and process the response.

       fetch("http://api.open-notify.org/astros.json")
         .then(function (response) {
            return response.json();
         })
         .then(function (data) {
            console.log(data);
         });

       • Explanation:
         • fetch() sends a request to the specified URL.
         • The first .then() method processes the response by converting it to JSON.
         • The second .then() method logs the returned data to the console.

   • Step 3: Display the Data Dynamically

     • We want to display the names of the astronauts on the web page. We will create a function to manipulate the DOM and display this data.

         function displayAstronauts(data) {
            const astronautList = document.getElementById("astronaut-list");
       
            data.people.forEach((person) => {
               const listItem = document.createElement("li");
               listItem.textContent = person.name;
               astronautList.appendChild(listItem);
            });
         }
       
         fetch("http://api.open-notify.org/astros.json")
            .then(function (response) {
               return response.json();
            })
            .then(function (data) {
               displayAstronauts(data);
            })
            .catch(function (error) {
               console.error("Error fetching data:", error);
            });

       • Explanation:
         • displayAstronauts(data) dynamically creates a list item for each astronaut and appends it to an unordered list (<ul>).
         • fetch() retrieves the data and calls displayAstronauts to update the DOM
         • The .catch() method handles any errors that occur during the fetch process.

3. Test and Refine:

   • Open index.html in the browser.
   • The list of astronauts should appear on the page.
   • Open DevTools to check for any errors or logs.
   • Debugging Tips:
     • Check the Console: Verify that the response data is logged correctly.
     • Network Errors: Ensure you have an active internet connection and the API is accessible.
     • CORS Issues: Some APIs may restrict access based on cross-origin policies.

4. Document and Maintain:

   • Use version control to track changes and updates.
     • Commit Changes: Use Git to track changes.

     git add .
     git commit -m "Fetch and display astronauts from API"

     • Push to GitHub: Share your code for collaboration.

     git push origin main

   • Regular Updates and Reviews
     • Schedule periodic code reviews to ensure your implementation remains up-to-date with JavaScript best practices. Update API endpoints if they change
   • Potential Code Enhancements
     • Experiment with Other APIs: try fetching weather data, news headlines, or stock prices.
     • Add Loading Indicators: Display a loading message while data is being fetched.
     • Error Messages: Show user-friendly error messages if the fetch fails.
   • Repository Documentation
     • Maintain a repository of example code and detailed documentation for future reference.

Common Issues

• Network Reliability: The API may be down or slow. Always include error handling with .catch().

• CORS Restrictions: Some APIs may block requests due to cross-origin policies. Consider using a proxy server if necessary.

• Data Format: Ensure you understand the structure of the JSON response to avoid parsing errors.

Edge Cases

• Empty Data: Handle cases where the API returns no astronauts.

• Rapid Requests: Avoid sending too many requests in a short time.

Summary

This lesson introduced the concept of fetching data from external APIs using JavaScript. You learned how to make asynchronous requests, process JSON responses, and update the DOM dynamically. Mastering these skills is essential for creating modern, data-driven web applications.