Display JSON data in HTML table using JavaScript dynamically

by

In this post, we will talk about how we can Convert JSON to HTML Table using JavaScript.

To create a dynamic table with JSON data, you can follow these steps:

  1. Retrieve the JSON data: You can retrieve the JSON data from an external API or from a local file. In this example, we will assume the JSON data is stored in a variable called jsonData.
  2. Parse the JSON data: You need to parse the JSON data into a JavaScript object. You can use the JSON.parse() method to do this. 
    const data = JSON.parse(jsonData);
  3. Create the table: You can create an HTML table element using the createElement() method. 
    const table = document.createElement('table');
  4. Create the table header: You can create the table header row and add it to the table. 
    const header = table.createTHead();
const row = header.insertRow();
  5. Add the column headers: You can loop through the keys of the first object in the JSON data to add the column headers. 
    for (const key in data[0]) {
  const th = document.createElement('th');
  const text = document.createTextNode(key);
  th.appendChild(text);
  row.appendChild(th);
}
  6. Add the table rows: You can loop through the JSON data to add the table rows.so here i’m converting JSON to HTML Table  using JavaScript. 
    const tbody = table.createTBody();
data.forEach(function(item) {
  const row = tbody.insertRow();
  for (const key in item) {
    const cell = row.insertCell();
    const text = document.createTextNode(item[key]);
    cell.appendChild(text);
  }
});
  7. Append the table to the HTML document: Finally, you can append the table to an element in the HTML document. 
    document.getElementById('table-container').appendChild(table);


Here is the final complete code:

I am creating an HTML table with the help of JSON data, I am creating my table with the help of pure javascript. 

In this example, we have an array of JSON data that can have objects which are having the data. 

<!DOCTYPE html>
<html>
<head>
    <title>How to create dynamic table with JSON data?</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div id="table-container">

        </div>
    </div>
    <script type="text/javascript">
        const jsonData = '[{"name":"John","age":30,"city":"New York"},{"name":"Jane","age":25,"city":"Chicago"},{"name":"Bob","age":40,"city":"San Francisco"}]';
        const data = JSON.parse(jsonData);
        const table = document.createElement('table');
        table.classList.add("table");
        table.classList.add("table-striped");
        const header = table.createTHead();
        const row = header.insertRow();
        for (const key in data[0]) {
            const th = document.createElement('th');
            const text = document.createTextNode(key);
            th.appendChild(text);
            row.appendChild(th);
        }
        const tbody = table.createTBody();
        data.forEach(function (item) {
            const row = tbody.insertRow();
            for (const key in item) {
                const cell = row.insertCell();
                const text = document.createTextNode(item[key]);
                cell.appendChild(text);
            }
        });
        document.getElementById('table-container').appendChild(table);
    </script>
</body>
</html>

Output:

Leave a comment