JavaScript访问JSON提示Cannot read properties of '0'错误如何解决？

错误原因 #

你犯了两个常见的XHR处理逻辑错误：

• 多余的序列化操作：xhr.responseText本身就是服务端返回的JSON格式字符串，你先调用JSON.stringify()会把这个字符串再包一层转义，后续JSON.parse()执行后得到的还是原始字符串，不是结构化的JS对象，自然不存在cities属性，访问json.cities得到undefined，再读取[0]就会触发类型错误。
• 缺少XHR状态判断：你没有判断请求的完成状态和响应状态码，可能请求还没拿到返回结果就提前执行了属性读取逻辑。

解决方法 #

方案1：手动解析响应文本

先判断请求状态，再直接解析responseText即可：

xhr.onreadystatechange = function () {
  // readyState=4代表请求完成，status=200代表响应正常
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 去掉多余的JSON.stringify操作
    const json = JSON.parse(xhr.responseText);
    // 可选加可选链操作符避免数据结构异常时报错
    console.log(json?.cities?.[0]?.plz);
  }
}

方案2：直接指定响应类型（更简洁，现代浏览器支持）

初始化XHR时直接指定返回格式为JSON，不需要手动解析：

// 发送请求前加这行配置
xhr.responseType = 'json';

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 直接取response就是已经解析好的JS对象
    const json = xhr.response;
    console.log(json.cities[0].plz);
  }
}

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