Basic JavaScript Fetch to HTML Table

This is a basic JavaScript example of fetching data from an API and putting the JSON result into a bootstrap table. The page has a button and the title. Once you click the button the API is called and an HTML table is generated into a DIV tag with the ID of “table”.

The HTML with Bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic JS Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <br><br>
        <button class="btn btn-primary" onclick="getList()">Get List</button>
        <h1>Random Users</h1>
        <div id="table">
        </div>
    </div>
</body>
</html>

The JavaScript calling randomuser.me REST API. Set to fetch 10 random users.

const url = 'https://randomuser.me/api/?results=10'; // Get 10 random users
function getList() {
    fetch(url)
    .then((resp) => resp.json()) // Transform the data into json
    .then(function(data) {
        var listArray = data.results;
      // Create and append the li's to the ul
    console.log('Results ', listArray);    
    // for (var i = 0; i < listArray.length; i++) {
    var tableStr = '';
    tableStr +=  "<table class='table able-bordered'>";
    tableStr += "<thead class='thead-dark'>";
    tableStr += "<th>Cell</th>";
    tableStr += "<th>Gender</th>";
    tableStr += "<th>Email</th>";
    tableStr += "<thead>";
    tableStr += "<tbody>";
    listArray.forEach(function( item ) {
        console.log( item );
        tableStr += "<tr>";
        tableStr += "<td>" + item.cell + "</td>";
        tableStr += "<td>" + item.gender + "</td>";
        tableStr += "<td>" + item.email + "</td>";
        tableStr += "</tr>";
        
    });
    tableStr += "</tbody>";
    tableStr += "</table>";
    document.getElementById("table").innerHTML = tableStr;    
  });  
 }

 function fillTable(data) {
    var tr;
    for (var i = 0; i < data.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + data[i].User_Name + "</td>");
        tr.append("<td>" + data[i].score + "</td>");
        tr.append("<td>" + data[i].team + "</td>");
        $('table').append(tr);
    }
}

Using fetch and then creating an HTML Table in JS and putting that into a div with the ID of “table”.

All together now

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic JS Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <br><br>
        <button class="btn btn-primary" onclick="getList()">Get List</button>
        <h1>Random Users</h1>
        <div id="table">
        </div>
    </div>
</body>
</html>
<script>
const url = 'https://randomuser.me/api/?results=10'; // Get 10 random users
function getList() {
    fetch(url)
    .then((resp) => resp.json()) // Transform the data into json
    .then(function(data) {
        var listArray = data.results;
      // Create and append the li's to the ul
    console.log('Results ', listArray);    
    // for (var i = 0; i < listArray.length; i++) {
    var tableStr = '';
    tableStr +=  "<table class='table able-bordered'>";
    tableStr += "<thead class='thead-dark'>";
    tableStr += "<th>Cell</th>";
    tableStr += "<th>Gender</th>";
    tableStr += "<th>Email</th>";
    tableStr += "<thead>";
    tableStr += "<tbody>";
    listArray.forEach(function( item ) {
        console.log( item );
        tableStr += "<tr>";
        tableStr += "<td>" + item.cell + "</td>";
        tableStr += "<td>" + item.gender + "</td>";
        tableStr += "<td>" + item.email + "</td>";
        tableStr += "</tr>";
        
    });
    tableStr += "</tbody>";
    tableStr += "</table>";
    document.getElementById("table").innerHTML = tableStr;    
  });  
 }

 function fillTable(data) {
    var tr;
    for (var i = 0; i < data.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + data[i].User_Name + "</td>");
        tr.append("<td>" + data[i].score + "</td>");
        tr.append("<td>" + data[i].team + "</td>");
        $('table').append(tr);
    }
}
</script>

You should see something like the following: Don’t forget to click the Get List button.

Previous Article
Next Article