In this article I am going to show how we can get data from api and show in table. Basically I am going to use the AJAX- XMLHttpRequest very common way to get data from api and show in table. Firstly I am fetching the data using XMLHttpRequest then showing that data in the form of table. Instead of this I am also using little-bit of bootstrap to styling our table so our table looks beautiful.

How to Make a GET Request

When dealing with APIs most of the time you will using this request to get data from api. This is the most used HTTP Request. Let see one example of how we can fetch data from api but before that let know about the AJAX- XML HTTP Request.

What is AJAX?

AJAX is not a programming language it is a technique for accessing web servers from a web page. AJAX stands for Asynchronous JavaScript And XML.

AJAX-XML HTTP Request

The XMLHttpRequest object can be used to exchange data with a web server. In simple words it is used to perform data manipulation on the web server without reloading the web page. Most of the times when we working with the web forms then you see this type of request is used for data exchange. So for using XML HTTP Request you can follow the given steps:

Create object of XML HTTP Request

const xhttp = new XMLHttpRequest();

Define API name

xhttp.open("GET","https://jsonplaceholder.typicode.com/posts", true);

Here we are defining the xhttp variable open to get data for “https://jsonplaceholder.typicode.com/posts” method. Now we have to define our callback function. In ajax there are many ways to get data from api but I am using the onreadystatechange. Because The onreadystatechange property specifies a function to be executed every time the status of the XMLHttpRequest object changes and when the readyState is 4 and status is 200 ( which means OK) then our response is ready. If this is ready then we can get data from api and show in table or in any card you want to show in your web page.

Send request to server

For sending request to server I have to use open and send method of ajax otherwise you finds an error. sometimes you can also define xhttp.open() command after defining the object and also define with the send command after the onreadystatechange() method like

xhttp.open("GET","https://jsonplaceholder.typicode.com/posts", true);//you can use here or with the send command in the bottom it is optional.
xhttp.send();

Example to get data from api and show in table

In this example I have created two files one is index.html where I want to show the data in the form of table and another file is script.js where i will fetching the data from api.

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get data from api and show in table</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
    <div>
        <table class="table table-success" id="dataTable">
          
        </table>
    </div>
    <script src="script.js"></script>
</body>
</html>

In above code I have also included the stylesheet of bootstrap for styling our table. If you don’t know about bootstrap then I can say it is free open source css library that provides lots of built in component that is fully responsive and instead of this we can use the bootstrap classes to style our component. In my code I have used bootstrap table class table table-success for styling our table.

Script.js

const xhttp=new XMLHttpRequest();
xhttp.open("GET","https://jsonplaceholder.typicode.com/posts", true);
xhttp.onreadystatechange=function(){
    if(this.readyState==4 && this.status==200){
        let apiResponse=JSON.parse(this.responseText);
        // creation of heading
        let table=`<tr>
        <th>UserId</th>
        <th>Id</th>
        <th>Title</th>
        <th>Body</th>
        </tr>`;

        // creation of content
        for(let i = 0; i < apiResponse.length; i++){
            table += `<tr>
            <td>${apiResponse[i].userId}</td>
            <td>${apiResponse[i].id}</td>
            <td>${apiResponse[i].title}</td>
            <td>${apiResponse[i].body}</td>
            </tr>`;
        }

        // this will displaying the content in html page
        document.getElementById("dataTable").innerHTML = table;
    }
}
xhttp.send();

Above is the simple code for get data from api and show in table. In the next article I am going to discuss how we can fetch data and use jquery dataTable plugin. If you don’t know jquery then don’t worry I will explain about jquery in the next article too. But before that if you want to create dynamic table in javascript then you must read dynamic table in javascript article.

Get data from api and show in table source code