In this article I will explain with an example, how to populate HTML Table from external API using JavaScript.
The external API will be called using XmlHttpRequest (XHR) and AJAX call.
 
 
ASPSnippets Test API
The following API will be used in this article.
https://raw.githubusercontent.com/aspsnippets/test/master/Customers.json
The API returns the following JSON.
[
   {
      "CustomerId":1,
      "Name":"John Hammond",
      "Country":"United States"
   },
   {
      "CustomerId":2,
      "Name":"Mudassar Khan",
      "Country":"India"
   },
   {
      "CustomerId":3,
      "Name":"Suzanne Mathews",
      "Country":"France"
   },
   {
      "CustomerId":4,
      "Name":"Robert Schidner",
      "Country":"Russia"
   }
]
 
 
HTML Markup
The following HTML Markup consists of an HTML DIV element.
<h4>Customers</h4>
<hr/>
<div id="dvCustomersGrid"></div>
 
 
JavaScript function to populate HTML Table from API
Inside the window.onload event handler, an XmlHttpRequest (XHR) AJAX request is made to the API.
Inside the onload event handler of XmlHttpRequest (XHR) AJAX request, the received response is converted to JavaScript Array using the JSON.parse JavaScript function and set in the customers variable.
Adding the Header Row
The Header Row will be built using Table TH element, created using the createElement method.
 
Adding the Data Rows
A loop is executed over the Array elements and one by one a Row is created in the HTML Table.
Table insertRow Method: This method adds a new row to a Table at the specified index. If the index is supplied as -1 then the row will be added at the last position.
 
Then inside each Row, a Cell is added using the Table insertCell method.
Table Row insertCell Method: This method adds a new cell to a Table Row at the specified index. If the index is supplied as -1 then the row will be added at the last position.
 
Adding the dynamic Table to the Page
Finally, the dynamically created table is added to the page by appending it to the HTML DIV using the appendChild method.
Note: You can also append an element to the body but then you won’t be able to set its placement on the page. Using a container such a DIV helps us add the dynamic element to the desired place.
 
<script type="text/javascript">
    window.onload = function () {
        var request;
        if (window.XMLHttpRequest) {
            //New browsers.
            request = new XMLHttpRequest();
        }
        elseif (window.ActiveXObject) {
            //Old IE Browsers.
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (request != null) {
            request.open("GET", "https://raw.githubusercontent.com/aspsnippets/test/master/Customers.json", false);
            request.onload = function () {
                if (request.readyState == 4 && request.status == 200) {
                    var customers = JSON.parse(request.responseText);
 
                    //Create a HTML Table element.
                    var table = document.createElement("table");
                    table.border = "1";
 
                    //Add the header row.
                    var row = table.insertRow(-1);
 
                    //Add the header cells.
                    var headerCell = document.createElement("TH");
                    headerCell.innerHTML = "CustomerId";
                    row.appendChild(headerCell);
 
                    headerCell = document.createElement("TH");
                    headerCell.innerHTML = "Name";
                    row.appendChild(headerCell);
 
                    headerCell = document.createElement("TH");
                    headerCell.innerHTML = "Country";
                    row.appendChild(headerCell);
 
                    //Add the data rows.
                    for (var i = 0; i < customers.length; i++) {
                        //Add the data row.
                        var row = table.insertRow(-1);
 
                        //Add the data cells.
                        var cell = row.insertCell(-1);
                        cell.innerHTML = customers[i].CustomerId;
 
                        cell = row.insertCell(-1);
                        cell.innerHTML = customers[i].Name;
 
                        cell = row.insertCell(-1);
                        cell.innerHTML = customers[i].Country;
                    }
 
                    var dvTable = document.getElementById("dvCustomersGrid");
                    dvTable.innerHTML = "";
                    dvTable.appendChild(table);
                }
            };
            request.send();
        }
    }
</script>
 
 
Screenshot
Populate Table from API using JavaScript
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code