Display JSON as HTML

Readability is key

To make your JSON presentation more digestible, spice it up with syntax highlighting. Google Code Prettify is a handy tool that color-codes your code for an enhanced reading experience:

<!-- Let's get fancy! -->
<!-- Let the pretty JSON party begin -->
<link href="path/to/prettify.css" type="text/css" rel="stylesheet" />
<script src="path/to/prettify.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', PR.prettyPrint); 
  // A touch of color never hurt anyone 😊
</script>

<pre class="prettyprint">${JSON.stringify(jsonData, null, 2)}</pre>


Isn't it beautiful? Like a rainbow but for nerds 🌈.

Have it all with libraries

For a luxurious encounter with JSON, libraries like "pretty-json" can provide a rich, aesthetic and interactive display experience:

<!-- Remember: dress to impress, also applies to code! -->
<link href="path/to/pretty-json.css" rel="stylesheet">
<script src="path/to/pretty-json.min.js"></script>

<script>
  const jsonData = { key: "value" };
  const el = PrettyJSON.view.Node({
      el:document.querySelector("#pretty-json"),
      data: jsonData
  });
  // TGIF - Thank god it's formatted!
</script>

<div id="pretty-json"></div>


Just think of it as getting your JSON data ready for a glamourous walk on the red carpet.

From raw data to shiny HTML elements

A step beyond simply displaying your JSON, transform it dynamically into interactive HTML elements. Here's how to convert JSON to an HTML table:

// Let's play with JSON alchemy!
function jsonToTable(jsonData) {
  const table = document.createElement('table');
  for (const key in jsonData) {
    const row = table.insertRow();
    const cell1 = row.insertCell(0);
    const cell2 = row.insertCell(1);
    cell1.textContent = key;
    cell2.textContent = jsonData[key];
  }
  return table.outerHTML;
}

const data = { name: "John", age: 30 };
document.body.innerHTML = jsonToTable(data);


Look at your JSON data, now look at your shiny new table, now back to your JSON data, sadly, it isn't your table, but it could be if it used this script.

Always compatible, always performant

When bringing these techniques to life, remember to put browser compatibility and performance under your microscope. Although JSON.stringify() is widely compatible, always be prepared for those mischievous edge cases. Test how your chosen library performs with larger data sets - because size really does matter.

Clickable JSON? Mind=Blown!

To take your JSON display to an another dimension, weave in <a> tags. Create clickable links within your parsed JSON data:

// Stop! Linking time!
const clickableJSON = (json) => {
  for (let key in json) {
    if (typeof json[key] === "string" && json[key].startsWith("http")) {
      json[key] = `<a href='${json[key]}'>${json[key]}</a>`;
    }
  }
  return json;
};
// Our JSON has evolved, it's now clickable! 
const jsonDataWithLinks = clickableJSON(jsonData);
document.body.innerHTML = `<pre>${JSON.stringify(jsonDataWithLinks, null, 2)}</pre>`;


Just like that, your JSON data is web-friendly and ready to surf the web!