Fetch data from JSON file and display in HTML table using async and await

Last Updated: 16th May 2025

Learn how to fetch data from an external JSON file and display it in an HTML table using JavaScript. Unlike many examples available online, this tutorial demonstrates how to leverage async and await for efficient data retrieval. Plus, it utilizes pure JavaScript to dynamically convert JSON data into a structured HTML table, ensuring fast and responsive performance. Follow this simple yet powerful example to enhance your JavaScript skills and streamline data processing in web applications.

JSON data

Here’s the JSON file. It has 3 nodes, the ID, Name of a Bird and the Type of bird. Its enough for the example.

🚀 In case you are not sure if the data is a valid JSON, then try our JSON Checker tool.

The Markup and the Script

<!DOCTYPE html>
<html>
<head>
    <style>
        table, th, td {
            border: solid 1px #ddd;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
        th {
            font-weight:bold;
        }
    </style>
</head>
<body>
    <input type='button' onclick='get_data()' value='Create Table' />
    <p id='showData'></p>
</body>

<script>
  let arrBirds;

  // Using async and await to fetch JSON data.
  const get_data = async () => {
    try {
      const url = "../../library/birds.json";
      const response = await fetch(url);
      arrBirds = await response.json();   // Fill array with data.

      make_the_table();         // Convert data to table.
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };

  const make_the_table = () => {
    if (!arrBirds || arrBirds.length === 0) {
      console.warn("No data available to display.");
      return;
    }

    // Extract unique column headers.
    const col = [...new Set(arrBirds.flatMap(Object.keys))];

    // Create table.
    const table = document.createElement("table");

    // Create table header row.
    const trHead = table.insertRow();
    col.forEach(header => {
      const th = document.createElement("th");
      th.innerText = header;
      trHead.appendChild(th);
    });

    // Add JSON data to the table as rows.
    arrBirds.forEach(rowData => {
      const tr = table.insertRow();
      col.forEach(key => {
        const td = tr.insertCell();
        td.innerText = rowData[key] ?? "-";     // Handle missing values.
      });
   });

    // Add table to the container
    const divShowData = document.getElementById("showData");
    divShowData.innerHTML = "";
    divShowData.appendChild(table);
  };
</script>
</html>

Try it

In this article, I have provided a detailed explanation of the async function and the await operator, highlighting their advantages.

➡️ One key benefit of using this approach is that it ensures the entire operation runs asynchronously, improving efficiency and responsiveness.

In the script above, clicking the button triggers the get_data() function, which waits for the data to be fetched asynchronously. Once the process is complete, the retrieved data is stored in an array called arrBirds.

With the data now available, we proceed to create a table using the stored information. The table is structured with headers extracted from the JSON nodes, ensuring a clear and organized display.

Using this method, you can do other operations like populate a SELECT dropdown list, or show data in unordered list etc.

Enhance Your Website with the HTML Table Generator – With or Without CSS

Looking for an effortless way to create professional HTML tables? The HTML Table Generator is a powerful, free tool designed to streamline the table creation process for websites and blogs. Whether you need styled tables with CSS or prefer a basic HTML structure, this tool offers flexibility to match your requirements.

Try Our HTML Table Generator ➪

← PreviousNext →

Fetch data from JSON file and display in HTML table using async and await – JavaScript

JSON data