遍历API潮汐高度数据时重复显示单日数据的问题求助

你遍历API返回的潮汐高度数据时，仅能获取单日正确数据，其余日期均重复显示该数据。核心问题出在DOM元素复用和数据匹配逻辑缺失上，以下是具体排查和修复方案：

问题根源 #

• DOM元素未随日期重建：tidedata1、tidedata2等元素属于全局复用，每次循环仅更新其innerHTML，导致所有日期方块绑定同一DOM引用，最终显示最后一次循环的数据。
• 日期关联逻辑缺失：代码仅通过时间点（start/end）判断更新元素，但未将潮汐数据与对应日期绑定，导致所有日期复用最后匹配到的那组数据。
• 循环逻辑错位：外层日期循环的状态判断（i < day）位置错误，未嵌入每个日期方块的创建流程中。

修复后的代码示例 #

// 第一步：按日期预分组潮汐数据，避免遍历混乱
const tideByDate = {};
data.values.forEach(item => {
  const date = item.time.slice(0, 10);
  const time = item.time.slice(11, 16);
  const height = item.value;
  
  // 初始化当前日期的潮汐数据容器
  if (!tideByDate[date]) {
    tideByDate[date] = { start: null, end: null };
  }
  
  // 匹配早潮/晚潮时间点
  if (time === start) {
    tideByDate[date].start = { time, height };
  }
  if (time === end) {
    tideByDate[date].end = { time, height };
  }
});

// 第二步：遍历当月日期，创建独立的日历方块（需替换totalDays、currentDay等为实际变量）
for (let dayNum = 1; dayNum <= totalDays; dayNum++) {
  // 格式化日期为API返回的YYYY-MM-DD格式
  const currentDate = `${year}-${String(month).padStart(2, '0')}-${String(dayNum).padStart(2, '0')}`;
  const currentTide = tideByDate[currentDate] || {};
  
  // 为每个日期创建全新的DOM元素，避免复用
  const square = document.createElement('div');
  square.classList.add('square');
  
  const monthNumEl = document.createElement('span');
  monthNumEl.textContent = dayNum;
  
  // 渲染早潮数据
  const tidedata1 = document.createElement('div');
  const tidedata1Full = document.createElement('div');
  if (currentTide.start) {
    tidedata1.innerHTML = `${currentTide.start.time} - ${currentTide.start.height}m`;
    tidedata1Full.innerHTML = `${currentTide.start.time}am - ${currentTide.start.height}m`;
  } else {
    tidedata1.textContent = '--';
    tidedata1Full.textContent = '--';
  }
  
  // 渲染晚潮数据
  const tidedata2 = document.createElement('div');
  const tidedata2Full = document.createElement('div');
  if (currentTide.end) {
    tidedata2.innerHTML = `${currentTide.end.time} - ${currentTide.end.height}m`;
    tidedata2Full.innerHTML = `${currentTide.end.time}pm - ${currentTide.end.height}m`;
  } else {
    tidedata2.textContent = '--';
    tidedata2Full.textContent = '--';
  }
  
  const square2 = document.createElement('div');
  square2.append(tidedata1Full, tidedata2Full);
  
  // 处理日期禁用状态
  if (dayNum < currentDay) {
    square.classList.add('disabled');
  }
  
  square.append(monthNumEl, tidedata1, tidedata2, square2);
  inner_grid.append(square);
}

calendar.append(month, inner_grid);

关键改进说明 #

• 数据预分组：先将所有潮汐数据按日期存入对象，后续可直接通过日期键快速获取对应数据，避免遍历混乱。
• 独立DOM元素：每个日期方块创建专属的tidedata1、tidedata2等元素，彻底解决复用导致的数据串值问题。
• 明确日期匹配：通过格式化后的日期字符串精准匹配预分组数据，确保每个方块加载对应日期的潮汐信息。
• 修正循环逻辑：将日期方块的创建、数据绑定、状态判断整合到同一循环中，逻辑更清晰，避免变量作用域错误。

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