JSON به تنهایی یک فرمت داده است و می‌تواند به راحتی در صفحات HTML برای نمایش یا تعامل با کاربران استفاده شود.
با ترکیب JSON و HTML می‌توان داده‌ها را بدون رفرش صفحه به صورت داینامیک نمایش داد.

🔹 1. استفاده ساده با JavaScript

فرض کنید یک داده JSON داریم:

let user = {
  "name": "Ali",
  "age": 25,
  "email": "ali@example.com"
};

HTML:

<div id="demo"></div>

JavaScript برای نمایش داده در HTML:

document.getElementById("demo").innerHTML = 
  `Name: ${user.name} <br> Age: ${user.age} <br> Email: ${user.email}`;

📌 خروجی در صفحه HTML:

Name: Ali
Age: 25
Email: ali@example.com

🔹 2. نمایش آرایه JSON در HTML

let skills = ["HTML", "CSS", "JavaScript"];
let list = "<ul>";

skills.forEach(skill => {
  list += `<li>${skill}</li>`;
});

list += "</ul>";
document.getElementById("demo").innerHTML = list;

📌 خروجی در HTML:

• HTML

• CSS

• JavaScript

🔹 3. دریافت داده JSON از سرور و نمایش در HTML

fetch("data.json")
  .then(response => response.json())
  .then(data => {
    let html = `<h2>${data.name}</h2><p>Age: ${data.age}</p>`;
    document.getElementById("demo").innerHTML = html;
  });

📌 داده‌ها به صورت داینامیک از سرور گرفته و در صفحه نمایش داده می‌شوند.

🔹 4. نکات مهم

• JSON به تنهایی نمایش داده نمی‌شود، باید با JavaScript به HTML اضافه شود

• می‌توان از innerHTML، textContent یا DOM Methods استفاده کرد

• ترکیب با AJAX و Fetch API → نمایش داده بدون رفرش صفحه

✅ خلاصه

• JSON → فرمت داده برای ذخیره و تبادل اطلاعات

• HTML → ساختار صفحه وب

• ترکیب JSON و HTML → نمایش داده‌ها به صورت داینامیک

• استفاده با JavaScript: innerHTML، forEach، template literals

• مناسب برای توسعه وب مدرن و SPA