How to Use the JavaScript Fetch API to Get Data? - GeeksforGeeks

20 Jul, 2021
The Task here is to show how the Fetch API can be used to get data from an API. I will be taking a fake API which will contain employee details as an example and from that API. I will show to get data by fetch() API method. 
fetch() method: The fetch() method is modern and versatile and is very well supported among the modern browsers. It can send network requests to the server and load new information whenever it’s needed, without reloading the browser.
Syntax: The fetch() method only has one mandatory argument, which is the URL of the resource you wish to fetch.let response = fetch(api_url, [other params])
let response = fetch(api_url, [other params])
Async Await: In this example, we will be using Async Await method with fetch() method to make promises in a more concise way. Async functions are supported in all modern browsers.
Syntax:async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

Prerequisite: Here, you will need an API for performing fetch() operation to get data from that API. You can also create an API or can take free mock APIs.
Here the API I used is: This API contains employee details in the form of key : value pair.https://employeedetails.free.beeceptor.com/my/api/path
Approach: First make the necessary JavaScript file, HTML file and CSS file. Then store the API URL in a variable (here api_url). Define a async function (here getapi()) and pass api_url in that function. Define a constant response and store the fetched data by await fetch() method. Define a constant data and store the data in JSON form by await response.json() method. Now we got the data from API by fetch() method in data variable. Pass this data variable to function which will show the data fetched. Function show takes the data variable and by applying for loop on data.list and getting all the rows to show, it stores all the data to tab variable which set the innerHTML property for the class employees in HTML file. I have also added a loader which loads till response comes.
JavaScript file:JavascriptJavascript// api urlconst api_url =       "https://employeedetails.free.beeceptor.com/my/api/path";  // Defining async functionasync function getapi(url) {        // Storing response    const response = await fetch(url);        // Storing data in form of JSON    var data = await response.json();    console.log(data);    if (response) {        hideloader();    }    show(data);}// Calling that async functiongetapi(api_url);  // Function to hide the loaderfunction hideloader() {    document.getElementById('loading').style.display = 'none';}// Function to define innerHTML for HTML tablefunction show(data) {    let tab =         `<tr>          <th>Name</th>          <th>Office</th>          <th>Position</th>          <th>Salary</th>         </tr>`;        // Loop to access all rows     for (let r of data.list) {        tab += `<tr>     <td>${r.name} </td>    <td>${r.office}</td>    <td>${r.position}</td>     <td>${r.salary}</td>          </tr>`;    }    // Setting innerHTML as tab variable    document.getElementById("employees").innerHTML = tab;}
Javascript
// api urlconst api_url =       "https://employeedetails.free.beeceptor.com/my/api/path";  // Defining async functionasync function getapi(url) {        // Storing response    const response = await fetch(url);        // Storing data in form of JSON    var data = await response.json();    console.log(data);    if (response) {        hideloader();    }    show(data);}// Calling that async functiongetapi(api_url);  // Function to hide the loaderfunction hideloader() {    document.getElementById('loading').style.display = 'none';}// Function to define innerHTML for HTML tablefunction show(data) {    let tab =         `<tr>          <th>Name</th>          <th>Office</th>          <th>Position</th>          <th>Salary</th>         </tr>`;        // Loop to access all rows     for (let r of data.list) {        tab += `<tr>     <td>${r.name} </td>    <td>${r.office}</td>    <td>${r.position}</td>     <td>${r.salary}</td>          </tr>`;    }    // Setting innerHTML as tab variable    document.getElementById("employees").innerHTML = tab;}
HTML file:HTMLHTML<!DOCTYPE html><html lang="en">    <head>        <script src="script.js"></script>        <link rel="stylesheet" href="style.css" />        <meta charset="UTF-8" />        <meta name="viewport"               content="width=device-width, initial-scale=1.0" />        <title>Document</title>    </head>    <body>        <!-- Here a loader is created which              loads till response comes -->        <div class="d-flex justify-content-center">            <div class="spinner-border"                  role="status" id="loading">                <span class="sr-only">Loading...</span>            </div>        </div>        <h1>Registered Employees</h1>        <!-- table for showing data -->        <table id="employees"></table>    </body></html>
HTML
<!DOCTYPE html><html lang="en">    <head>        <script src="script.js"></script>        <link rel="stylesheet" href="style.css" />        <meta charset="UTF-8" />        <meta name="viewport"               content="width=device-width, initial-scale=1.0" />        <title>Document</title>    </head>    <body>        <!-- Here a loader is created which              loads till response comes -->        <div class="d-flex justify-content-center">            <div class="spinner-border"                  role="status" id="loading">                <span class="sr-only">Loading...</span>            </div>        </div>        <h1>Registered Employees</h1>        <!-- table for showing data -->        <table id="employees"></table>    </body></html>
Output:
In console ,data in JSON will look like this.
HTML output.
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
Picked
Web-API
JavaScript
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Difference Between PUT and PATCH Request
JavaScript | console.log() with Examples
How to read a local text file using JavaScript?
Node.js | fs.writeFileSync() Method