如何使用 JavaScript 按钮实现 JSON 数组的逐项遍历显示-js教程-PHP中文网

如何使用 JavaScript 按钮实现 JSON 数组的逐项遍历显示

本文介绍如何通过点击按钮依次展示 json 数组中的对象数据，利用 `async/await` 获取数据、状态索引控制与模运算实现循环翻页，并确保 dom 渲染安全、代码简洁可维护。

要实现“点击按钮查看下一条 JSON 数据”的交互效果，核心在于：状态管理（当前索引）+ 数据获取 + 动态渲染 + 边界处理。以下是一个完整、健壮且现代的实现方案。

✅ 推荐实现（基于 async/await 与事件委托）

首先，HTML 结构保持简洁清晰：

<div id="user"></div>
<button id="next" type="button">→ 下一位</button>

JavaScript 部分采用模块化写法，兼顾可读性与健壮性：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

// 工具函数：快捷选择元素 & 创建带属性的元素
const el = (sel, par) => (par || document).querySelector(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);

const elUser = el("#user");
const elNext = el("#next");

// 渲染单个用户信息（自动清空旧内容，避免重复追加）
const showUser = (user) => {
  const div = elNew("div", {
    className: "item-user",
    textContent: `${user.first_name || ''} ${user.last_name || ''}`.trim()
  });
  elUser.innerHTML = ""; // 安全清空（避免 innerHTML 拼接 XSS 风险）
  elUser.append(div);
};

// 主逻辑：异步加载 → 初始化 → 绑定点击事件
(async () => {
  try {
    const res = await fetch('data.json');
    if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);

    const data = await res.json();
    if (!Array.isArray(data) || data.length === 0) {
      throw new Error("JSON 数据格式错误：期望非空数组");
    }

    let currentIndex = 0;
    showUser(data[currentIndex]); // 初始显示第 0 项

    elNext.addEventListener("click", () => {
      currentIndex = (currentIndex + 1) % data.length; // 自动循环：0→1→2→0→...
      showUser(data[currentIndex]);
    });
  } catch (err) {
    console.error("数据加载失败：", err);
    elUser.innerHTML = `<div class="error">⚠️ 加载失败，请检查 network 或 data.json 路径</div>`;
  }
})();

? 关键设计说明

% data.length 实现无缝循环：当 currentIndex 达到末尾时自动归零，无需手动判断 if (currentIndex >= data.length) currentIndex = 0;。
textContent 替代字符串拼接：防止 XSS（尤其当数据含 HTML 标签时），同时自动处理 undefined/null 字段（如示例中第 3 项无 first_name）。
错误防御增强：检查 HTTP 状态、JSON 结构、数组长度，提升用户体验与调试效率。
innerHTML = "" + append()：比 innerHTML += ... 更安全高效，避免重复解析与潜在注入。

? 扩展建议（可选）

添加「上一位」按钮？只需复制逻辑并改用 currentIndex = (currentIndex - 1 + data.length) % data.length（负数取模需补偿）。
显示当前序号（如 “第 1 / 3 位”）？在 showUser() 中同步更新一个元素。
支持键盘导航（← → 方向键）？监听 document.addEventListener('keydown', ...) 并过滤 event.key。

该方案轻量、无依赖、符合现代 Web 开发最佳实践，适用于静态 JSON 数据轮播场景。