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

【问题标题】：Use Javascript to get the list of a user's Github repositories使用 Javascript 获取用户的 Github 存储库列表
【发布时间】：2012-08-04 17:41:36
【问题描述】：

首先，感谢您的阅读。

我在 GitHub 上托管我当前的项目。使用 GitHub Pages，我]托管我的个人博客，you can reach the blog here。

在博客上，我有一个专门介绍我目前从事的所有项目的页面。基本上，我想通过查询 GitHub 自动显示我所有正在进行的项目的列表。

虽然谷歌搜索了很多，我发现this can be achieved using JavaScript。我试过了，但没有按预期工作。加载页面时，我只收到短信“查询 GitHub 以获取存储库”。似乎什么也没有发生。

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

由于我在 JavaScript 方面没有经验，任何人都可以帮我解决它吗？

问候，
罗兰。

这是我在HTML page中使用的代码

<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 语法...

【问题讨论】：

如果可能，请显示您尝试使用的代码来查询 github。

标签： javascript api github repository

【解决方案1】：

http://developer.github.com/v3/ 非常明确地说明了如何执行此操作。其实我那里和这里的用户名是一样的，我给你看看。

我在 github 上打开了我的 repo 页面，https://github.com/jcolebrand（到目前为止这很明显）并在 Chrome 中按 F12。

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

然后，正如它所说，我完全从 API 页面测试了 $.getJSON('//api.github.com/users/jcolebrand/repos',{},function(data){console.log(data)})，你瞧，我被授予了我自己看到的五个存储库。

以下是我没有做的事情：我没有获得 API 密钥，我没有通过 API 工作，并且我使用了我现有的凭据。牢记这些事情，但这是今后改进的方法。

【讨论】：

【解决方案2】：

您发布的脚本不起作用，因为 URL 是针对旧 API 的。将 URL 更改为此，它应该适合您。

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

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

【讨论】：

嘿，MJOyce，非常感谢。我工作得很好。我做了一些增强，让它与 JSON 数据完全兼容。嗯，'?callback=?'部分甚至没有必要。不过，再次感谢！
8 年后，2020 年即将过去，它不再工作了。有人可以看看吗？

【解决方案3】：

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

【讨论】：

你能用它来访问私有仓库吗？

【解决方案4】：

使用JQuery 快捷方式XMLHttpRequest、$.getJson() 扩展到@JColebrand 的答案，这是一个在 2020 年有效的 API 调用。

    user = 'tik9'
        apirepo = `https://api.github.com/users/${user}`
        
   listrepos = document.createElement('ul')
        document.getElementById('github').appendChild(listrepos)
        $.getJSON(apirepo + '/repos', function (data) {
            console.log('data now', data)

            function compare(a, b) {
                if (a.watchers > b.watchers) {
                    return -1
                }
                if (a.watchers < b.watchers) {
                    return 1
                }
                return 0
            }

            data.sort(compare)
            data.forEach(v => {

                listItemRepo = document.createElement('li')
                listrepos.appendChild(listItemRepo)
                hlink = document.createElement('a')
                listItemRepo.appendChild(hlink)
                hlink.textContent = `${v.description} | Stars: ${v.watchers}`
                hlink.href = v.html_url
            })
        })

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<h4><span id=repocount></span> Github Repositories</h4>
        <div id=github></div>

【讨论】：