本文介绍如何通过点击按钮依次展示 json 数组中每个对象的数据，利用索引控制、事件监听与循环翻页逻辑实现平滑切换。
在前端开发中，常需将结构化 JSON 数据以交互方式呈现给用户。例如，从一个包含多个用户信息的数组中，按顺序逐条显示——这正是本教程要解决的核心需求：点击“next”按钮，自动切换并渲染下一个对象的内容。
实现该功能的关键在于三点：
- 数据预加载与状态管理：一次性获取全部 JSON 数据，并用变量（如 currentUser）记录当前展示项的索引；
- 事件驱动更新：为按钮绑定 click 事件，每次触发时递增索引，并通过取模运算（% data.length）实现循环切换；
- 安全高效渲染：每次切换前清空旧内容，再插入新 DOM 节点，避免重复叠加或内存泄漏。
以下是完整、可直接运行的实现代码（已优化可读性与健壮性）：
<div id="user"></div> <button id="next" type="button">→ Next</button>
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 || ''}`
});
elUser.innerHTML = ""; // 清空旧内容（也可用 elUser.replaceChildren(div)）
elUser.append(div);
};
(async () => {
try {
let currentIndex = 0;
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("Invalid JSON: expected a non-empty array");
}
showUser(data[currentIndex]); // 初始化显示首项
elNext.addEventListener("click", () => {
currentIndex = (currentIndex + 1) % data.length; // 自动循环：0→1→2→0...
showUser(data[currentIndex]);
});
} catch (err) {
console.error("Failed to load or display user data:", err);
elUser.textContent = "Error loading data.";
}
})();✅ 注意事项与最佳实践：
立即学习“Java免费学习笔记（深入）”；
- 使用 async/await 替代 .then() 链，提升代码可读性与错误处理能力；
- 添加 HTTP 状态校验（res.ok）和 JSON 结构校验，增强鲁棒性；
- textContent 替代字符串拼接 innerHTML 可防止 XSS（尤其当数据含用户输入时）；
- 若需支持“上一页”，可扩展为双向导航（维护 currentIndex 并添加 prev 按钮）；
- 如数据量极大，建议配合虚拟滚动或分页加载，避免初始渲染性能瓶颈。
该方案简洁、可扩展，适用于产品级单页应用中的数据轮播、表单向导、测试题切换等典型场景。
