如何用JavaScript按钮切换JSON对象数组中的下一条数据？

我现有一段基于id展示JSON对象数组数据的代码，希望编写一个函数，实现点击按钮依次查看id为1、2等的下一条数据，请问该采用什么实现方案？

现有代码 #

JSON数据 #

[
  {
    "id": 0,
    "last_name": "Dan",
    "first_name": "Terry"
  },
  {
    "id": 1,
    "last_name": "Cal",
    "first_name": "Adam"
  },
  {
    "id": 2,
    "year": 2015,
    "last_name": "Brooke",
    "first_name": "Lily"
  }
]

JavaScript代码 #

fetch('data.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    console.log(err);
  });


function appendData(data) {
    var mainContainer = document.getElementById("myData");
    var taser
    
    for (var i = 0; i < data.length; i++) {
      if (data[i].id === 0) {       

      var div = document.createElement("div");
      div.innerHTML = data[i].first_name + data[i].last_name;
      mainContainer.appendChild(div);
    }
  }
}

HTML代码 #

<body>
  <div id="myData"></div>

<button id="btn">next</button>
</body>

实现方案 #

核心思路是：全局存储所有数据、维护当前展示的id索引、点击按钮时更新索引并重新渲染对应数据，同时处理边界情况。

修改后的完整代码 #

JavaScript代码

// 全局变量存储所有数据和当前展示的id索引
let allData = [];
let currentId = 0;

fetch('data.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    allData = data;
    // 初始化展示第一条数据（id=0）
    showData(currentId);
    // 给按钮绑定点击事件
    document.getElementById('btn').addEventListener('click', handleNextClick);
  })
  .catch(function (err) {
    console.log(err);
  });

// 负责渲染指定id的数据到页面
function showData(id) {
  const mainContainer = document.getElementById("myData");
  // 先清空容器里的旧内容
  mainContainer.innerHTML = '';
  // 找到对应id的数据项
  const targetItem = allData.find(item => item.id === id);
  if (targetItem) {
    const div = document.createElement("div");
    // 拼接内容，兼容不同数据字段（比如第三条的year）
    let content = `${targetItem.first_name} ${targetItem.last_name}`;
    if (targetItem.year) {
      content += `，年份：${targetItem.year}`;
    }
    div.innerHTML = content;
    mainContainer.appendChild(div);
  }
}

// 按钮点击事件处理函数
function handleNextClick() {
  // 计算下一个id，到达最后一条后自动回到第一条（循环查看）
  currentId = (currentId + 1) % allData.length;
  showData(currentId);
}

关键说明 #

1. 全局变量存储：用allData保存所有请求到的数据，currentId记录当前展示的id，避免每次点击都重新请求或遍历全部数据。
2. 独立渲染函数：showData函数专门负责清空旧内容、查找目标数据并渲染，逻辑更清晰，复用性更强。
3. 边界处理：用取模运算(currentId + 1) % allData.length实现循环查看，若不需要循环，可改成判断currentId < allData.length - 1时才更新索引，同时禁用按钮提示用户已到最后一条。
4. 字段兼容：渲染时判断是否存在year字段，避免部分数据缺少该字段时显示异常。

内容的提问来源于stack exchange，提问作者amarton