Javascript处理API返回的JSON数据时属性未定义如何解决

问题原因 #

你的报错来自两个前端逻辑错误，和API返回格式无关：

1. JSON处理方法用反：Http.responseText 是接口返回的JSON格式字符串，不是可直接读取属性的JS对象。你使用的JSON.stringify()作用是把JS对象转为JSON字符串，相当于你在原有字符串基础上额外做了一次转义，得到的依然是字符串，自然无法读取.total_bandwidth属性。你需要使用JSON.parse()把JSON字符串解析为JS对象才能正常读取属性。
2. 缺少请求状态校验：onreadystatechange事件会在请求状态每一次变化时触发，你没有判断请求是否已经完成、响应是否成功，可能会在接口还没返回结果的时候就执行读取逻辑，也会触发属性不存在的报错。

修正后代码 #

Http.open("GET", url);
Http.send();
Http.onreadystatechange = (e) => {
  // 校验：请求完成且响应状态码为成功区间
  if (Http.readyState === 4 && Http.status >= 200 && Http.status < 300) {
    // 解析JSON字符串为JS对象
    var api = JSON.parse(Http.responseText)
    document.getElementById("stat").innerHTML = "Powering over " + api.total_bandwidth.TB + "TB of private internet traffic"
  }
}

相关说明 #

• JSON.parse()：输入合法的JSON字符串，输出对应的JS对象
• JSON.stringify()：输入JS对象，输出对应的JSON格式字符串
• Http.responseText本身永远是字符串类型，不会自动转为JS对象，只要接口返回标准JSON格式都需要手动解析。

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