bhylu.com

Advertisements

JSON HTML

Parse data, create nodes, and write textContent when displaying JSON in a page. This keeps data from becoming executable markup.

Where to run this

This example changes a document. Open it in the HTML playground, then select Run code. It runs inside a separate preview.

A practical example

HTML + JavaScript
Try in playground

<ul id="sessions">
</ul>
<script>
  const sessions = JSON.parse('[{"title":"Repair club"},{"title":"Woodwork"}]');
  for (const session of sessions) {
    const item = document.createElement("li");
    item.textContent = session.title;
    document.getElementById("sessions").append(item);
  }
</script>

What happens

The two session titles appear as list items.