Ajax成功回调中for循环失效，无法遍历JSON数组展示

兄弟，我太懂这种“直接输出正常，一加循环就挂”的崩溃感了！咱们一步步排查，大概率是这几个细节没处理对：

1. 循环里错误覆盖了DOM内容（最常见的坑） #

很多人第一次写循环渲染的时候，会犯这个错：每次循环都用innerHTML = ...直接替换内容，而不是追加。比如：

// ❌ 错误写法：每次循环覆盖，最后只显示最后一个元素
success: function(destAirports) {
  for (let i = 0; i < destAirports.length; i++) {
    document.getElementById('airport-list').innerHTML = destAirports[i].name;
  }
}

正确的做法是用+=追加，或者先把所有内容拼接成字符串再一次性插入（后者更高效，减少DOM操作次数）：

// ✅ 推荐写法：先拼接内容，再一次性插入
success: function(destAirports) {
  let listHtml = '';
  // 用for...of循环更简洁
  for (const airport of destAirports) {
    // 这里根据你的数组元素结构调整，比如取name、code等属性
    listHtml += `<li>${airport.name} (${airport.code})</li>`;
  }
  // 最后一次性替换DOM内容
  document.getElementById('airport-list').innerHTML = listHtml;
}

2. 没确认返回的JSON是不是真的数组 #

有时候后端返回的看起来像数组，但其实是嵌套在对象里的（比如{ data: [...] }），或者干脆是个对象。这时候直接循环肯定失效！先在回调里打个日志确认：

success: function(response) {
  console.log('返回的数据结构：', response);
  console.log('是不是数组？', Array.isArray(response));
  
  // 如果是嵌套在data里的数组，要先取出来
  const destAirports = response.data || response;
  if (Array.isArray(destAirports)) {
    // 这里再写循环逻辑
  } else {
    console.error('返回的不是数组，请检查后端接口！');
  }
}

3. 循环里访问数组元素的方式不对 #

如果你的数组元素是对象（比如{ name: '北京首都机场', code: 'PEK' }），直接输出整个数组的时候浏览器会自动序列化显示，但循环的时候如果直接写destAirports[i]，会输出[object Object]，看起来像是失效了。这时候要明确访问对象的属性：

// ❌ 错误：直接输出对象本身
listHtml += `<li>${destAirports[i]}</li>`;

// ✅ 正确：访问对象的具体属性
listHtml += `<li>${destAirports[i].name} - ${destAirports[i].code}</li>`;

4. 变量作用域的老坑（针对旧版JS） #

如果你用的是var而不是let/const声明循环变量，可能会因为作用域问题导致所有循环都引用最后一个元素的值。现在推荐用let或const来声明循环变量：

// ❌ 不推荐：var会导致作用域提升问题
for (var i = 0; i < destAirports.length; i++) {
  // ...
}

// ✅ 推荐：用let/const确保每个循环迭代的变量独立
for (let i = 0; i < destAirports.length; i++) {
  // ...
}

先按这几个方向排查，应该就能解决问题啦！

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