调用API获取足球主队名称渲染表格时报Cannot read property '0' of undefined错误

问题根源 #

• 你没有将接口返回的JSON字符串转为JS对象，this.responseText是原始字符串格式，无法直接读取.response这类自定义属性，因此data.response为undefined，访问data.response[i]就触发了对应报错。
• 循环的长度判断错误，你要遍历的是返回结果里的response数组，不是data本身的长度。

修复代码 #

你只需要修改readyState判断内的逻辑即可，修正后代码如下：

xhr.onreadystatechange = function()
{
    if(this.readyState == 4 && this.status == 200)
    {
        // 先把返回的JSON字符串转为可读取属性的JS对象
        var data = JSON.parse(this.responseText);
        // 遍历response数组，不要用data本身的长度
        for (var i=0; i<data.response.length; i++) 
        {
           var row = $('<tr><td>' + data.response[i].teams.home.name + '</td></tr>');
           $('#myTable').append(row);
        }
    }
}

xhr.onerror = function()
{
    console.log('Request Error');
}

xhr.send();

可选兼容优化 #

如果担心接口返回的数据结构不符合预期，可以加一层结构校验避免报错：

if (data && Array.isArray(data.response)) {
  // 把遍历逻辑放到这个判断里
}

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