如何在HTML页面显示JSON数据？

在HTML页面中显示JSON数据是Web开发中的常见需求，无论是展示API响应、配置信息还是动态数据，以下是详细实现方法和最佳实践，结合安全性、可读性和性能优化：

核心实现方法

原生JavaScript解析（推荐基础方案）

<div id="json-container"></div>
<script>
  const jsonData = {
    "name": "示例数据",
    "items": [
      {"id": 1, "value": "苹果"},
      {"id": 2, "value": "香蕉"}
    ]
  };
  function renderJSON(data, containerId) {
    const container = document.getElementById(containerId);
    // 递归构建HTML结构
    const parseData = (obj) => {
      if (typeof obj !== 'object' || obj === null) {
        return `<span class="json-value">${obj}</span>`;
      }
      let html = '<ul class="json-obj">';
      for (const key in obj) {
        html += `<li><span class="json-key">${key}:</span> ${parseData(obj[key])}</li>`;
      }
      return html + '</ul>';
    };
    container.innerHTML = parseData(data);
  }
  renderJSON(jsonData, 'json-container'); // 调用渲染
</script>

使用JSON.stringify()格式化

<pre id="json-output"></pre>
<script>
  const data = {user: {name: "张三", age: 30}};
  document.getElementById('json-output').textContent = 
    JSON.stringify(data, null, 2);  // 缩进2空格
</script>

第三方库实现（增强可读性）

• 使用json-formatter-js：

  <div id="json-viewer"></div>
  <script src="https://cdn.jsdelivr.net/npm/json-formatter-js"></script>
  <script>
    const data = {system: {status: "active", users: 1500}};
    const formatter = new JSONFormatter(data, 2); // 展开2层
    document.getElementById('json-viewer').appendChild(formatter.render());
  </script>

样式优化技巧

.json-obj {
  list-style: none;
  padding-left: 20px;
  border-left: 1px solid #eee;
}
.json-key {
  color: #d44950; /* 键名红色 */
  font-weight: bold;
}
.json-value {
  color: #0d7ea0; /* 值蓝色 */
}
pre {
  background: #f8f8f8;
  padding: 15px;
  border-radius: 5px;
  max-height: 400px;
  overflow: auto;
}

安全性与性能实践

1. 防御XSS攻击：

   

   • 避免直接使用innerHTML解析未过滤的JSON，优先用textContent：

     // 安全做法
     element.textContent = JSON.stringify(untrustedData);
     // 或使用DocumentFragment

2. 大数据优化：

   

   • 对超过1MB的JSON使用虚拟滚动（如react-json-view）或分页加载。

3. SEO友好处理：

   • 关键JSON数据在服务端渲染为HTML，避免爬虫无法解析JavaScript：

     <!-- PHP示例：服务端预渲染 -->
     <div><?= htmlspecialchars(json_encode($data), ENT_QUOTES) ?></div>

进阶方案：动态交互

<div id="dynamic-json"></div>
<button onclick="fetchData()">加载数据</button>
<script>
  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    renderJSON(data, 'dynamic-json'); // 结合第一部分渲染函数
  }
</script>

适用场景选择

• 轻度需求：用JSON.stringify() + <pre>
• 复杂交互：选择json-formatter-js或react-json-view等库。
• 生产环境：始终验证JSON来源并转义敏感字符。
• 性能瓶颈：对大数据集采用分块渲染或服务端处理。