Json Html in JavaScript
JSON and HTML in JavaScript
JSON and HTML often work together when you want to dynamically generate or update HTML content on a web page using data stored in JSON format.
What is JSON HTML in JavaScript?
JSON (JavaScript Object Notation) holds data (like from an API).
JavaScript parses JSON and uses the data to create or update HTML elements dynamically.
This enables rendering dynamic content without reloading the page.
How to Use JSON to Generate HTML in JavaScript
Example: Display a list of users from JSON data
Step 1: JSON data (could come from server or local variable)
const usersJson = `[ {"name": "Alice", "age": 25}, {"name": "Bob", "age": 30}, {"name": "Charlie", "age": 35}]`;Step 2: Parse JSON string into JavaScript array
const users = JSON.parse(usersJson);Step 3: Generate HTML using JavaScript and insert into the page
const userList = document.getElementById('userList'); // UL or div elementlet html = '';users.forEach(user => { html += `<li>${user.name} - Age: ${user.age}</li>`;});userList.innerHTML = html;Complete Example with HTML
<!DOCTYPE html><html><head> <title>JSON to HTML Example</title></head><body> <h2>User List</h2> <ul id="userList"></ul> <script> const usersJson = `[ {"name": "Alice", "age": 25}, {"name": "Bob", "age": 30}, {"name": "Charlie", "age": 35} ]`; const users = JSON.parse(usersJson); const userList = document.getElementById('userList'); let html = ''; users.forEach(user => { html += `<li>${user.name} - Age: ${user.age}</li>`; }); userList.innerHTML = html; </script></body></html>Summary
JSON holds the data.
JavaScript parses JSON and creates HTML.
HTML updates dynamically based on JSON data.
Would you like examples with more complex JSON or how to fetch JSON from APIs and display HTML?
