JavaScript code to integrate with an external API

Let’s start with simple HTML code and save it as .html file.

<!DOCTYPE html>
<html>
    <head>
        <title>API Integration</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>

<body>
    <button id="fetch-data-button">Fetch Data</button>
    <div id="data-container"></div>

    <script src="app.js"></script>
</body>
</html>

This HTML code creates a button element with the id “fetch-data-button” and a div element with the id “data-container”. The button element is used to trigger the JavaScript function that fetches data from the API, and the div element is used to display the data on the page. The script tag at the end of the file should reference to your javascript file, in this case is app.js

Create a separate CSS file and link it to your HTML file using the link tag in the head section of your HTML file. Below is sample code for style.css.

#fetch-data-button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

#data-container {
    padding: 20px;
    background-color: #f2f2f2;
}

Create a .js file and add below code in it.

// Boilerplate code for an app that integrates with an external API using vanilla JavaScript

// Fetch function to retrieve data from the API
async function fetchData(url) {
    try {
        let response = await fetch(url);
        let data = await response.json();
        return data;
    } catch (error) {
        console.error(error);
    }
}

// Example function to get data from the API and display it on the page
async function getAndDisplayData() {
    let data = await fetchData('https://example-api.com/data');
    let container = document.getElementById('data-container');
    container.innerHTML = data;
}

// Event listener to call the function when a button is clicked
let button = document.getElementById('fetch-data-button');
button.addEventListener('click', getAndDisplayData);

This is a basic example of how you can use vanilla JavaScript to fetch data from an external API and display it on a web page. The fetchData function uses the fetch method to retrieve data from the specified URL, and the getAndDisplayData function uses this function to get data from the API and update the contents of an HTML element with the returned data. The example also includes an event listener that calls the getAndDisplayData function when a button is clicked.

Now Run that code in by clicking ‘Run without Debugging’ in VSCode free editor.

You will see below Page in Browser.

On Clicking on ‘Fetch Data’ button, you will see data from API will be displayed on screen.

You can save the HTML and JS code in the same file or in separate file and open it in browser like Chrome or Firefox.

Please note the external API you are trying to connect to should be enabled for CORS (Cross-Origin Resource Sharing) or else you will not be able to connect to it from your browser.

Leave a Comment Cancel Reply