使用JavaScript+AJAX调用GitHub API报错：id未定义求解决

算力阿峰

2026-5-29

解决你的AJAX获取GitHub仓库列表的错误问题

嘿，我来帮你搞定这个报错！你遇到的Uncaught ReferenceError是因为你直接用了id、full_name、html_url这些变量，但它们根本没被定义——这些其实是GitHub API返回的每个仓库对象的属性，得从你解析后的repos数组里的每个元素去获取才行。另外，用for...in遍历数组也不是最佳实践，容易拿到数组原型链上的额外属性，换成普通的for循环或者forEach会更稳妥。

错误原因拆解

你原来的循环里写的是：

for(var i in repos){
  output += '<ul>' + 
    '<li>ID: ' +id[i]+'</li>' + 
    '<li>Full Name: ' +full_name[i]+'</li>' + 
    '<li>URL: ' +html_url[i]+'</li>'+ 
  '</ul>'
}

这里的id[i]完全找不到对应的变量，正确的写法应该是repos[i].id，因为repos是一个数组，每个元素是包含仓库信息的对象，你得通过对象.属性的方式访问。

修正后的完整代码

let gitHubRequest = new XMLHttpRequest();
gitHubRequest.open('GET', 'https://api.github.com/users/billythesailor/repos', true);

gitHubRequest.onreadystatechange = function() {
  if(this.readyState == 4 && this.status == 200) {
    var repos = JSON.parse(this.responseText);
    var output = '';
    
    // 用普通for循环遍历数组，更安全
    for(var i = 0; i < repos.length; i++) {
      // 从当前仓库对象中获取属性
      output += '<ul>' +
        '<li>ID: ' + repos[i].id + '</li>' +
        '<li>Full Name: ' + repos[i].full_name + '</li>' +
        '<li>URL: <a href="' + repos[i].html_url + '" target="_blank">' + repos[i].html_url + '</a></li>' +
      '</ul>';
    }
    
    document.getElementById('repos').innerHTML = output;
  }
}

gitHubRequest.send();