html展示json

JSON数据在HTML中的展示方式

直接渲染为文本

通过<pre>标签包裹JSON字符串，配合JSON.stringify实现格式化输出。

示例代码：

<pre id="json-display"></pre>
<script>
  const data = { name: "张三", age: 25, skills: ["HTML", "CSS"] };
  document.getElementById('json-display').textContent = JSON.stringify(data, null, 2);
</script>

转换为表格展示

适用于扁平结构的JSON数据，使用<table>标签动态生成。

实现步骤：

1. 遍历JSON对象的键值对
2. 生成表头（<thead>）
3. 生成表体（<tbody>）

示例代码：

<table border="1">
  <thead>
    <tr>
      <th>属性</th>
      <th>值</th>
    </tr>
  </thead>
  <tbody id="json-table-body">
    <!-动态生成 -->
  </tbody>
</table>
<script>
  const data = { name: "李四", age: 30, city: "北京" };
  const tbody = document.getElementById('json-table-body');
  for (const [key, value] of Object.entries(data)) {
    tbody.innerHTML += `<tr><td>${key}</td><td>${value}</td></tr>`;
  }
</script>

树形结构展示

处理嵌套JSON数据,通过递归生成可折叠的列表。

关键技术：

• 使用<ul>/<ol>标签创建层级
• 配合CSS实现折叠效果（details标签或自定义）
• 递归函数处理嵌套对象/数组

示例代码：

<div id="json-tree"></div>
<script>
  function createTree(container, data) {
    if (Array.isArray(data)) {
      const ul = document.createElement('ul');
      data.forEach(item => ul.appendChild(createTree(document.createElement('li'), item)));
      container.appendChild(ul);
    } else if (typeof data === 'object') {
      const ul = document.createElement('ul');
      for (const [key, value] of Object.entries(data)) {
        const li = document.createElement('li');
        li.textContent = `${key}: `;
        ul.appendChild(li).appendChild(createTree(document.createElement('span'), value));
      }
      container.appendChild(ul);
    } else {
      container.textContent = data;
    }
    return container;
  }
  const data = { 
    user: { name: "王五", roles: ["admin", "editor"] },
    posts: [{ id: 1, title: "文章1" }]
  };
  createTree(document.getElementById('json-tree'), data);
</script>

可视化图表展示

将数值型数据转换为图表（需引入绘图库，如ECharts、Chart.js）。

实现流程：

1. 提取JSON中的数值字段
2. 配置图表类型（柱状图/饼图等）
3. 绑定数据到图表实例

示例代码（ECharts）：

<div id="chart" style="width:600px;height:400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
  const data = { categories: ["JavaScript", "HTML", "CSS"], values: [85, 78, 92] };
  const chart = echarts.init(document.getElementById('chart'));
  chart.setOption({ { text: '技能掌握程度' },
    tooltip: {},
    xAxis: { data: data.categories },
    yAxis: {},
    series: [{
      name: '分数',
      type: 'bar',
      data: data.values
    }]
  });
</script>

常见问题与解答

问题1：如何处理包含大量数据的JSON展示？

解答：

1. 分页加载：仅渲染当前页数据，使用slice()分割数组
2. 懒加载：滚动到底部时动态加载后续数据（需监听scroll事件）
3. 虚拟列表：只渲染可视区域内的元素（需计算元素位置）
4. 使用成熟方案：如React Virtualized、Vue Virtual Scroll List等库

示例（分页加载）：

let currentPage = 0;
const pageSize = 100;
function loadPage(data) {
  const start = currentPage  pageSize;
  const end = start + pageSize;
  renderData(data.slice(start, end)); // 假设renderData是渲染函数
  currentPage++;
}

问题2：如何让用户交互展开/折叠JSON层级？

解答：

1. 使用details（原生支持点击展开）：

   <details>
     <summary>点击展开对象</summary>
     <pre>${JSON.stringify(data, null, 2)}</pre>
   </details>

2. 自定义折叠组件：
   • 添加按钮控制显隐
   • 使用CSS变量控制图标状态（[data-expanded]）
   • 递归组件设计（适合框架如React/Vue）
3. 第三方库方案：
   • json-viewer（支持语法高亮和折叠）
   • react-json-tree（React专用