JSON HTML

JSON HTML

The most common action performed with parsed JSON data is injecting it dynamically into HTML.

By looping through JSON arrays, you can generate complex tables and dropdown menus effortlessly!

Dynamic HTML Generation

Instead of hardcoding fifty <li> tags in your HTML, you can fetch an array from a server.

You parse the JSON, loop through the data, and append dynamic HTML strings directly to the DOM.

This creates highly responsive, data-driven interfaces with absolutely minimal code.

Creating a Table

Let's dynamically build an entire HTML table based on a JSON string representing a database.

We will extract the data and loop through it row by row!

let dbData = '[{"name":"Alice", "age":25}, {"name":"Bob", "age":30}]';
let obj = JSON.parse(dbData);

let html = "<table border='1'><tr><th>Name</th><th>Age</th></tr>";
for (let i = 0; i < obj.length; i++) {
  html += "<tr><td>" + obj[i].name + "</td><td>" + obj[i].age + "</td></tr>";
}
html += "</table>";
// Injecting the table directly into the HTML document
document.getElementById("output").innerHTML = html;

SEO and Best Practices

Dynamic content injected via JavaScript is fully parsed by modern search engine crawlers like Google.

However, always ensure that your critical keywords and structural headers are present in the core HTML.

Using JSON to build dynamic tables provides exceptional user experience and extremely fast page rendering.