Display nested JSON data in HTML table using JavaScript dynamically

 In this post I will explain the logic and provide a sample code to display nested JSON data in an HTML table using JavaScript dynamically.

• The first step is to fetch the JSON data using AJAX request. Once the data is received, we can loop through the data and create an HTML table dynamically using JavaScript.
• To display nested data in the HTML table, we need to use nested loops. We will first loop through the outer array and create a new row in the HTML table for each item in the array. Then, we will loop through the inner array and create a new cell in the HTML table for each item in the array.

Here is a sample code that displays nested JSON data in an HTML table using JavaScript dynamically:

HTML Code:

<table id="myTable">
  <thead>
    <tr>
      <th> Name </th>
      <th> Age </th>
      <th> Email </th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

JavaScript Code:

// Fetch JSON data using AJAX request
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    const data = JSON.parse(this.responseText);

    // Loop through the data and create an HTML table
    const tableBody = document.querySelector("#myTable tbody");
    for (let i = 0; i < data.length; i++) {
      const row = document.createElement("tr");
      row.innerHTML = "<td>" + data[i].name + "</td>" + "<td>" + data[i].age + "</td>" + "<td>" + data[i].email + "</td>";

      // Loop through the nested array and create a new cell for each item in the array
      const nestedData = data[i].nestedData;
      for (let j = 0; j < nestedData.length; j++) {
        row.innerHTML += "<td>" + nestedData[j].property1 + "</td>" + "<td>" + nestedData[j].property2 + "</td>";
      }

      // Add the row to the HTML table
      tableBody.appendChild(row);
    }
  }
};
xhttp.open("GET", "data.json", true);
xhttp.send();
// Fetch JSON data using AJAX request
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    const data = JSON.parse(this.responseText);

    // Loop through the data and create an HTML table
    const tableBody = document.querySelector("#myTable tbody");
    for (let i = 0; i < data.length; i++) {
      const row = document.createElement("tr");
      row.innerHTML = "<td>" + data[i].name + "</td>" + "<td>" + data[i].age + "</td>" + "<td>" + data[i].email + "</td>";

      // Loop through the nested array and create a new cell for each item in the array
      const nestedData = data[i].nestedData;
      for (let j = 0; j < nestedData.length; j++) {
        row.innerHTML += "<td>" + nestedData[j].property1 + "</td>" + "<td>" + nestedData[j].property2 + "</td>";
      }

      // Add the row to the HTML table
      tableBody.appendChild(row);
    }
  }
};
xhttp.open("GET", "data.json", true);
xhttp.send();

[
  {
    "name": "John",
    "age": 30,
    "email": "john@example.com",
    "nestedData": [
      {
        "property1": "value1",
        "property2": "value2"
      },
      {
        "property1": "value3",
        "property2": "value4"
      }
    ]
  },
  {
    "name": "Jane",
    "age": 25,
    "email": "jane@example.com",
    "nestedData": [
      {
        "property1": "value5",
        "property2": "value6"
      },
      {
        "property1": "value7",
        "property2": "value8"
      }
    ]
  }
]

You can modify the code to match your JSON data format and table structure.