title: Use Javascript to get the list of a user's Github repositories
body: <p>First of all, thanks for reading.</p>
  
  <p>I am hosting my current projects on GitHub. Using GitHub Pages, I ]host my personal blog, <a href="http://yonaba.github.com/" rel="nofollow noreferrer">you can reach the blog here</a>.</p>
  
  <p>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.</p>
  
  <p>While Googling a lot, I found that <a href="http://aboutcode.net/2010/11/11/list-github-projects-using-javascript.html" rel="nofollow noreferrer">this can be achieved using JavaScript</a>.
  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.</p>
  
  <p>I contacted GitHub maintainers, and they kindly replied that this technique uses an outdated version of the GitHub API.</p>
  
  <p>As I am not experienced in JavaScript, can anyone help me to fix it ? </p>
  
  <p>Regards,<br>
  Roland.</p>
  
  <hr>
  
  <p>Here is the code I used inside the <a href="http://yonaba.github.com/projects.html" rel="nofollow noreferrer">HTML page</a></p>
  
  <pre><code>&lt;div id="opensource-projects"&gt;&lt;/div&gt; 
  
  &lt;!-- JavaScript to load and display repos from GitHub --&gt;
  &lt;script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/javascripts/git.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    $(function() {
      $("#opensource-projects").loadRepositories("Yonaba");
    });
    &lt;/script&gt;
  </code></pre>
  
  <p>Then, inside the file <code>git.js</code>, I have the following:</p>
  
  <pre><code>// 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("&lt;span&gt;Querying GitHub for " + username +"'s repositories...&lt;/span&gt;");
  
    var target = this;
    $.githubUser(username, function(data) {
      var repos = data.user.repositories;
      sortByNumberOfWatchers(repos);
  
      var list = $('&lt;dl/&gt;');
      target.empty().append(list);
      $(repos).each(function() {
        list.append('&lt;dt&gt;&lt;a href="'+ this.url +'"&gt;' + this.name + '&lt;/a&gt;&lt;/dt&gt;');
        list.append('&lt;dd&gt;' + this.description + '&lt;/dd&gt;');
      });
    });
  
    function sortByNumberOfWatchers(repos) {
      repos.sort(function(a,b) {
        return b.watchers - a.watchers;
      });
    }
  };
  </code></pre>
  
  <p>@jcolebrand: Thanks for your kind help, but i didn't really get what you meant. I tried sending some command to Chrome's console, too. I guess <code>$</code> is an alias for jQuery, isn't it? Well, sending same stuff The console just outputs multiple objects, describing my repos. Awesome!<br>
  I think the issue is now parsing them properly and display them. Gee, I need to learn JavaScipt syntax for that...</p>