使用Javascript获取用户的Github存储库列表

Question

首先，谢谢你的阅读。

我在GitHub上主持我目前的项目。使用GitHub页面，我主持我的个人博客，你可以在这里找到博客。

在博客上，我有一个网页，专门为我目前正在工作的所有项目。基本上，我想通过查询GitHub自动显示所有正在进行的项目的列表。

当我在谷歌上搜索的时候，我发现了这可以使用JavaScript来实现。。我试过了，但没有像预期的那样起作用。在加载页面时，我只收到文本消息“查询GitHub以获得存储库”。似乎什么都没发生。

我联系了GitHub维护人员，他们善意地回答说，这种技术使用了过时的GitHub API版本。

由于我在JavaScript方面没有经验，有人能帮我解决吗？

致以敬意，

罗兰。

下面是我在HTML页面中使用的代码

<div id="opensource-projects"></div> 

<!-- JavaScript to load and display repos from GitHub -->
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/javascripts/git.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
    $("#opensource-projects").loadRepositories("Yonaba");
  });
  </script>

然后，在文件git.js中，我有以下内容：

// http://aboutcode.net/2010/11/11/list-github-projects-using-javascript.html

jQuery.githubUser = function(username, callback) {
  jQuery.getJSON("http://github.com/api/v1/json/" + username + "?callback=?", callback);
}

jQuery.fn.loadRepositories = function(username) {
  this.html("<span>Querying GitHub for " + username +"'s repositories...</span>");

  var target = this;
  $.githubUser(username, function(data) {
    var repos = data.user.repositories;
    sortByNumberOfWatchers(repos);

    var list = $('<dl/>');
    target.empty().append(list);
    $(repos).each(function() {
      list.append('<dt><a href="'+ this.url +'">' + this.name + '</a></dt>');
      list.append('<dd>' + this.description + '</dd>');
    });
  });

  function sortByNumberOfWatchers(repos) {
    repos.sort(function(a,b) {
      return b.watchers - a.watchers;
    });
  }
};

@jcolebrand:谢谢你的帮助，但我不太明白你的意思。我也试着向Chrome的控制台发送一些命令。我想$是jQuery的别名，不是吗？嗯，发送同样的东西控制台只输出多个对象，描述我的回复。太棒了！

我认为现在的问题是正确地解析并显示它们。天啊，我需要学习JavaScipt语法.

Answer 1

您发布的脚本不起作用，因为URL是针对旧API的。将URL更改为这个，它应该对您有效。

https://api.github.com/users/YOUR_USERNAME_HERE/repos?callback=CALLBACK

注意：callback=<YOUR_CALLBACK>是可选的。

Answer 2

http://developer.github.com/v3/非常明确地说明了如何做到这一点。事实上，由于我的用户名在那里和这里是一样的，让我展示给你看。

我在github，https://github.com/jcolebrand上打开了我的回购页面(到目前为止这是显而易见的)，并按下了Chrome的F12。

我询问了一下是否确实安装了jQuery，因为我在做示例时喜欢快捷方式。

然后，我从API页面中准确地测试了$.getJSON('//api.github.com/users/jcolebrand/repos',{},function(data){console.log(data)})，就像它说的那样，瞧，我得到了我自己看到的五个回复。

以下是我没有做的事情:我没有获得API密钥，我没有通过API工作，我使用了我现有的凭据。记住这些事情，但这是如何改进它的前进。

Answer 3

您也可以使用github库。这个库是我最喜欢的https://github.com/michael/github