JSON HTML

After JSON has been parsed, the resulting JavaScript values can be displayed in HTML.

You can display individual values, objects, arrays, lists, and tables.

Displaying a Property

A parsed JSON object becomes a JavaScript object.

Object properties can be displayed with normal JavaScript syntax.

Example

const text = '{"name":"John","age":30,"city":"New York"}';

const person = JSON.parse(text);

document.getElementById("demo").textContent = person.name;

Note: The example displays the value of the name property.

Displaying Multiple Properties

Multiple properties can be combined into one text value.

Example

const text = '{"name":"John","age":30,"city":"New York"}';

const person = JSON.parse(text);

document.getElementById("demo").textContent =

person.name + ", " + person.age + ", " + person.city;

Displaying an Object

Displaying an object directly does not show all its properties.

Example

const person = {name: "John", age: 30};

myDisplayer(person);

Use JSON.stringify() to display the complete object as JSON text.

Example

const person = {name: "John", age: 30};

let text = JSON.stringify(person)

myDisplayer(text);

Formatting JSON Text

The third parameter of JSON.stringify() can format the JSON with indentation.

Use an HTML

 element to preserve spaces and line breaks.

Example
<pre id="demo"></pre>

<script>

const person = {

  name: "John",

  age: 30,

  city: "New York"

};

document.getElementById("demo").textContent =

JSON.stringify(person, null, 2);

</script>


Note: The number 2 adds two spaces of indentation for each level.


Displaying a JSON Array
A parsed JSON array becomes a JavaScript array.
Array values can be accessed by their index numbers.
Example
const text = '["Ford","Volvo","BMW"]';

const cars = JSON.parse(text);

document.getElementById("demo").textContent = cars[0];


Note: Array indexes start at zero.


Displaying All Array Values
A for...of loop can read every value in an array.
Example
const text = '["Ford","Volvo","BMW"]';

const cars = JSON.parse(text);

let output = "";

for (const car of cars) {

  output += car + "\n";

}

document.getElementById("demo").textContent = output;


Note: Use a 
 element to display the line breaks.



Displaying an Array as a List
JavaScript can create HTML elements for the values in a JSON array.
Example
<ul id="demo"></ul>

<script>

const text = '["Ford","Volvo","BMW"]';

const cars = JSON.parse(text);

const list = document.getElementById("demo");

for (const car of cars) {

  const item = document.createElement("li");

  item.textContent = car;

  list.appendChild(item);

}

</script>


Note: The example creates one 
 element for each array value.



Displaying an Array of Objects
JSON often contains an array of objects.
products.json
[

  {"name":"Laptop","price":899},

  {"name":"Mouse","price":29},

  {"name":"Keyboard","price":79}

]

Use a loop to display a property from each object.
Example
<ul id="demo"></ul>

<script>

const text = `[

  {"name":"Laptop","price":899},

  {"name":"Mouse","price":29},

  {"name":"Keyboard","price":79}

]`;

const products = JSON.parse(text);

const list = document.getElementById("demo");

for (const product of products) {

  const item = document.createElement("li");

  item.textContent = product.name + ": $" + product.price;

  list.appendChild(item);

}

</script>


Displaying JSON in a Table
An array of objects can be displayed as an HTML table.
Example
<table id="demo" class="ws-table-all">

  <tr>

    <th>Product</th>

    <th>Price</th>

  </tr>

</table>

<script>

const products = [

  {name: "Laptop", price: 899},

  {name: "Mouse", price: 29},

  {name: "Keyboard", price: 79}

];

const table = document.getElementById("demo");

for (const product of products) {

  const row = table.insertRow();

  const nameCell = row.insertCell();

  const priceCell = row.insertCell();

  nameCell.textContent = product.name;

  priceCell.textContent = "$" + product.price;

}

</script>

The example creates one table row for each product.

Displaying Nested JSON
JSON objects and arrays can contain nested values.
Example
const text = `{

  "name": "John",

  "address": {

    "city": "New York",

    "country": "USA"

  }

}`;

const person = JSON.parse(text);

document.getElementById("demo").textContent =

person.address.city;


Note: Use each property name to move through the nested object.


Loading and Displaying JSON
The fetch() method can load JSON from a file or server.
The parsed data can then be displayed in HTML.
Example
<p id="demo"></p>

<script>

async function loadCustomer() {

  try {

    const response = await fetch("customer.json");

    if (!response.ok) {

      throw new Error("HTTP error " + response.status);

    }

    const customer = await response.json();

    document.getElementById("demo").textContent =

    customer.name + ", " + customer.city;

  }

  catch(err) {

    document.getElementById("demo").textContent = err.message;

  }

}

loadCustomer();

</script>


Note: The response.json() method already parses the JSON. Do not pass its result to JSON.parse().


textContent or innerHTML?
The textContent property displays values as plain text.
The innerHTML property interprets its value as HTML.



Col 1
Col 2




Property
Use


textContent
Displaying text and untrusted data


innerHTML
Adding HTML that your application controls




Warning: Do not insert untrusted JSON values directly into innerHTML. The values could contain unwanted or dangerous HTML.

Safer
element.textContent = customer.name;


Missing Properties
A JSON object might not contain every expected property.
The nullish coalescing operator can provide a default value.
Example
const person = {name: "John"};

document.getElementById("demo").textContent =

person.city ?? "Unknown city";


Note: The default value unknown city is used when the property is null or undefined.