使用jQuery读取JSON后访问数组元素出现undefined错误的排查

这是前端开发里非常常见的坑——$.getJSON是异步请求，它不会阻塞后续代码的执行。也就是说，当你尝试访问test[i]的时候，浏览器可能还没完成data.json的加载，回调函数里的test.push(value.topic)根本还没执行，所以test数组还是空的（或者只填充了一部分），自然会返回undefined。

举个直观的执行顺序拆解：

1. 初始化test = []
2. 触发$(document).ready回调
3. 发送getJSON请求到data.json（此时浏览器继续往下执行代码，不会等请求结果）
4. 如果你在这一步（或者ready回调外部）访问test[i]，test还是空数组
5. 过了一会儿请求完成，才会执行getJSON的回调函数，把topic值push到test里

解决方案：确保在数据加载完成后再访问test #

方案1：把业务逻辑放到getJSON回调内部 #

这是最直接的做法，确保只有当数据加载完成、test数组被填充后，才去访问它：

var test = []; 
$(document).ready(function(){ 
  $.getJSON("data.json", function(data){ 
    $.each(data, function(key, value){ 
      test.push(value.topic); 
    }); 
    // 在这里安全访问test，比如：
    console.log(test[0]); // 输出 "Books"
    // 把你需要用test的代码都放在这个回调里
  }); 
});

方案2：用Promise链式调用（更灵活） #

jQuery的ajax类方法（包括getJSON）返回的Deferred对象兼容Promise，你可以用.then()来链式处理：

var test = []; 
$(document).ready(function(){ 
  $.getJSON("data.json")
    .then(function(data){ 
      // 填充test数组
      $.each(data, function(key, value){ 
        test.push(value.topic); 
      }); 
      return test;
    })
    .then(function(filledTest){ 
      // 在这个回调里处理已经填充好的数组
      console.log(filledTest[1]); // 输出 "Grossery"
    })
    .catch(function(error){
      // 别忘了处理请求失败的情况
      console.error("加载数据出错：", error);
    }); 
});

方案3：用async/await（现代写法） #

如果你的运行环境支持ES2017+，可以用async/await让异步代码看起来像同步代码：

$(document).ready(async function(){ 
  var test = []; 
  try {
    // 等待getJSON请求完成
    const data = await $.getJSON("data.json");
    // 填充数组
    $.each(data, function(key, value){ 
      test.push(value.topic); 
    });
    // 现在可以安全访问test了
    console.log(test[2]); // 输出 "stationery"
  } catch (error) {
    console.error("数据加载失败：", error);
  }
});

额外注意事项 #

还要检查你的data.json格式是否合法！你给出的示例里有"quantity": ...，这是无效的JSON语法，实际要改成具体的数值（比如"quantity": 5），否则请求会失败，回调函数根本不会执行，test数组也永远不会被填充。

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