How to generate an HTML table from JSON data in JavaScript.

24 Sep 2023

HTMLTable

In this tutorial, we will learn how to generate an HTML table from JSON data using JavaScript. This will allow us to dynamically create a table on a web page based on the data stored in a JSON object.

Prerequisites

Before we begin, make sure you have the following:

Basic knowledge of JavaScript and JSON
A text editor to write JavaScript code
A modern web browser to test the code

Step 1: Retrieve the JSON Data

To start, we need to retrieve the JSON data from a source, such as an API or a local file. For simplicity, let’s assume we have the JSON data stored in a variable called jsonData.

const jsonData = [
  { name: "John Doe", email: "john@example.com", age: 25 },
  { name: "Jane Smith", email: "jane@example.com", age: 30 },
  // more data...
];

Step 2: Create the HTML Table

We will create an empty HTML table with placeholders for the table header and table rows. We’ll use JavaScript to populate the table with the JSON data.

const table = document.createElement("table");
const tableHeaders = Object.keys(jsonData[0]);

// Create table header
const headerRow = document.createElement("tr");
tableHeaders.forEach(header => {
  const th = document.createElement("th");
  th.textContent = header;
  headerRow.appendChild(th);
});
table.appendChild(headerRow);

// Create table rows
jsonData.forEach(item => {
  const row = document.createElement("tr");
  tableHeaders.forEach(header => {
    const cell = document.createElement("td");
    cell.textContent = item[header];
    row.appendChild(cell);
  });
  table.appendChild(row);
});

// Add the table to the webpage
document.body.appendChild(table);

Step 3: Style the Table (Optional)

You can style the table by adding CSS to make it visually appealing. For example, you can set the width, background color, and font styles.

Conclusion

Generating an HTML table from JSON data in JavaScript is a powerful way to dynamically display data on a web page. By following the steps outlined in this tutorial, you can easily convert JSON data into a structured HTML table.

#JavaScript #HTMLTable