First of all, thanks for reading.

I am hosting my current projects on GitHub. Using GitHub Pages, I ]host my personal blog, you can reach the blog here.

On the blog, I have a page dedicated to all the projects I am currently working on. Basically, I wanted to display the list of all my on-going projects automatically, via querying GitHub.

While Googling a lot, I found that this can be achieved using JavaScript. I tried it, but it didn't work as expected. When loading the page, I just get the text message 'Querying GitHub for repositories'. And nothing seems to happen.

I contacted GitHub maintainers, and they kindly replied that this technique uses an outdated version of the GitHub API.

As I am not experienced in JavaScript, can anyone help me to fix it ?

Regards,
Roland.

Here is the code I used inside the HTML page

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

<!-- JavaScript to load and display repos from GitHub -->
<script src=".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>

Then, inside the file git.js, I have the following:

// .html

jQuery.githubUser = function(username, callback) {
  jQuery.getJSON("/" + 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: Thanks for your kind help, but i didn't really get what you meant. I tried sending some mand to Chrome's console, too. I guess $ is an alias for jQuery, isn't it? Well, sending same stuff The console just outputs multiple objects, describing my repos. Awesome!
I think the issue is now parsing them properly and display them. Gee, I need to learn JavaScipt syntax for that...

First of all, thanks for reading.

I am hosting my current projects on GitHub. Using GitHub Pages, I ]host my personal blog, you can reach the blog here.

On the blog, I have a page dedicated to all the projects I am currently working on. Basically, I wanted to display the list of all my on-going projects automatically, via querying GitHub.

While Googling a lot, I found that this can be achieved using JavaScript. I tried it, but it didn't work as expected. When loading the page, I just get the text message 'Querying GitHub for repositories'. And nothing seems to happen.

I contacted GitHub maintainers, and they kindly replied that this technique uses an outdated version of the GitHub API.

As I am not experienced in JavaScript, can anyone help me to fix it ?

Regards,
Roland.

Here is the code I used inside the HTML page

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

<!-- JavaScript to load and display repos from GitHub -->
<script src="http://ajax.microsoft./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>

Then, inside the file git.js, I have the following:

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

jQuery.githubUser = function(username, callback) {
  jQuery.getJSON("http://github./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: Thanks for your kind help, but i didn't really get what you meant. I tried sending some mand to Chrome's console, too. I guess $ is an alias for jQuery, isn't it? Well, sending same stuff The console just outputs multiple objects, describing my repos. Awesome!
I think the issue is now parsing them properly and display them. Gee, I need to learn JavaScipt syntax for that...

• javascript
• api
• github
• repository

• If possible, please show the code you tried to use to query github. – AlexMA Commented Aug 7, 2012 at 16:50

4 Answers 4

The script that you posted isn't working because the URL is for the older API. Change the URL to this and it should work for you.

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

Note: callback=<YOUR_CALLBACK> is optional.

http://developer.github./v3/ is pretty explicit on how to do this. In fact, since my username there and here are the same, let me show you.

I opened my repo page on github, https://github./jcolebrand (so this is evident so far) and pressed F12 in Chrome.

I interrogated to see that jQuery is indeed installed, because I like shortcuts when I'm doing examples.

I then tested $.getJSON('//api.github./users/jcolebrand/repos',{},function(data){console.log(data)}) exactly from the API page, as it says, and lo and behold, I was granted the five repos I see for myself.

Here are the things I have not done: I did not acquire an API key, I did not work via API, and I used my existing credentials. Keep those things in mind, but that's how to improve it going forward.

you can use a github API lib too. This lib is my favourite https://github./michael/github

Extending to @JColebrand's answer with the JQuery shortcut to XMLHttpRequest, $.getJson() , here is an API Call that works in 2020.

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

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

            data.sort(pare)
            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./jquery-3.5.1.min.js"></script>
</head>

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