html json数据解析展示

2026-04-28 21:00:11 1495阅读 0评论

用 HTML 与 JSON 做数据展示：从数据到页面的自然过渡

在日常开发里，常常会从后端或静态资源拿到一组结构化的数据，想在页面上直观呈现出来。用 HTML 结合 JSON 来做展示，既能保持结构清晰，也能让数据与页面的映射关系一目了然。

从数据到可视化的关键点

把 JSON 数据变成页面元素，通常需要三步：解析数据、映射到页面结构、渲染结果。这里不绕弯，直接用一个简单的示例场景来说明。

假设有一个用户信息的 JSON 数据：

{
  "users": [
    {
      "id": 1,
      "name": "张三",
      "email": "zhangsan@example.com",
      "active": true
    },
    {
      "id": 2,
      "name": "李四",
      "email": "lisi@example.com",
      "active": false
    }
  ]
}

我们想把它渲染成两个用户卡片，放在页面上，便于查看。

用 HTML 结构承载数据

在 HTML 中，用 div 或列表包裹数据项，每个项对应一个用户：

<div id="user-list">
  <div class="user-card" data-id="1">
    <h2>{{ name }}</h2>
    <p>Email: {{ email }}</p>
    <p>Status: {{ active ? '活跃' : '不活跃' }}</p>
  </div>
  <div class="user-card" data-id="2">
    <h2>{{ name }}</h2>
    <p>Email: {{ email }}</p>
    <p>Status: {{ active ? '活跃' : '不活跃' }}</p>
  </div>
</div>

模板式的写法，能让数据直接“填入”页面，提升可读性与效率。

用脚本动态填充数据

在页面加载后，用脚本把解析出的数据逐项写入模板。这里以原生 JavaScript 为例，思路同样适用于 Vue、React 等框架：

// 获取数据（实际可从 API 或静态字符串获取）
const data = {
  users: [
    {
      id: 1,
      name: "张三",
      email: "zhangsan@example.com",
      active: true
    },
    {
      id: 2,
      name: "李四",
      email: "lisi@example.com",
      active: false
    }
  ]
};

// 获取页面容器
const userList = document.getElementById('user-list');

// 遍历用户数组，逐个创建并插入用户卡片
data.users.forEach(user => {
  const card = document.createElement('div');
  card.className = 'user-card';
  card.dataset.id = user.id;

  card.innerHTML = `
    <h2>${user.name}</h2>
    <p>Email: ${user.email}</p>
    <p>Status: ${user.active ? '活跃' : '不活跃'}</p>
  `;

  userList.appendChild(card);
});

这段代码不依赖任何库，逻辑清晰，能直接在项目中复用。

增加交互与筛选

为了让展示更有价值，可以加入筛选或状态交互。比如根据活跃状态过滤用户，或点击卡片高亮查看：

<div id="user-list">
  <div class="user-card" data-id="1">
    <h2>{{ name }}</h2>
    <p>Email: {{ email }}</p>
    <p>Status: {{ active ? '活跃' : '不活跃' }}</p>
  </div>
  <div class="user-card" data-id="2">
    <h2>{{ name }}</h2>
    <p>Email: {{ email }}</p>
    <p>Status: {{ active ? '活跃' : '不活跃' }}</p>
  </div>
</div>

<div>
  <label>筛选活跃用户: 
    <input type="checkbox" id="filter-active" />
  </label>
</div>

<div>
  <label>选择用户: 
    <select id="selected-user"></select>
  </label>
</div>

然后通过脚本动态更新：

const filterCheckbox = document.getElementById('filter-active');
const userList = document.getElementById('user-list');
const select = document.getElementById('selected-user');

// 先把卡片渲染到页面，同时把 ID 填入下拉
data.users.forEach(user => {
  const card = document.createElement('div');
  card.className = 'user-card';
  card.dataset.id = user.id;
  card.innerHTML = `
    <h2>${user.name}</h2>
    <p>Email: ${user.email}</p>
    <p>Status: ${user.active ? '活跃' : '不活跃'}</p>
  `;
  userList.appendChild(card);

  const option = document.createElement('option');
  option.value = user.id;
  option.textContent = user.name;
  select.appendChild(option);
});

filterCheckbox.addEventListener('change', () => {
  userList.querySelectorAll('.user-card').forEach(card => {
    const isActive = card.dataset.active === 'true';
    card.style.display = filterCheckbox.checked && isActive ? 'block' : 'none';
  });
});

select.addEventListener('change', e => {
  const selectedId = parseInt(e.target.value);
  userList.querySelectorAll('.user-card').forEach(card => {
    if (parseInt(card.dataset.id) === selectedId) {
      card.classList.add('highlight');
    } else {
      card.classList.remove('highlight');
    }
  });
});

以上示例用到了动态样式与事件监听，能快速把展示变成可筛选、可互动的体验。