Try it Yourself: JSON HTML

JSON HTML

<!DOCTYPE html>
<html>
<body>

<h2>Result</h2>
<ul id="product-list"></ul>

<script>
const products = [
  { name: 'Keyboard', price: 49.99 },
  { name: 'Mouse', price: 19.99 },
  { name: 'Monitor', price: 199.99 }
];

const container = document.getElementById('product-list');
container.innerHTML = products
  .map(p => `<li>${p.name} - $${p.price.toFixed(2)}</li>`)
  .join('');
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>Result</h2>
<ul id="product-list"></ul>

<script>
const products = [
  { name: 'Keyboard', price: 49.99 },
  { name: 'Mouse', price: 19.99 },
  { name: 'Monitor', price: 199.99 }
];

const container = document.getElementById('product-list');
container.innerHTML = products
  .map(p => `<li>${p.name} - $${p.price.toFixed(2)}</li>`)
  .join('');
</script>

</body>
</html>