Récuperer la liste des dépôts (repositories) d'un utilisateur GitHub

Version imprimable

Bonjour,

Depuis un certain moment, j'héberge mes projets personnels sur GitHub.
Plus récemment, j'ai découvert le générateur de site Jekyll. Il m'a permis de configurer et de mettre en place un blog très simplement et en quelques minutes.
Le blog en question est accessible ici.
Les fichiers du site sont eux même accessibles sur ce dépôt.

Par suite, j'ai voulu en étendre un peu les possibilités en intégrant du Javascript. Sur la page censée lister mes projets, j'ai inséré un script qui interroge l'API GitHub afin de renvoyer la liste des projets d'un utilisateur dont le nom est passé en paramètre.
Voici un extrait du code source de la page :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <body> <div class="site"> <div id="opensource-projects"></div>  <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>  </body>
Et le fichier git.js contient le code suivant:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 // 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; }); } };
Source du script: AboutCode

Cependant, il semble ne pas fonctionner. Du tout. En chargeant la page, je reçois le message suivant, qui reste figé.

http://ompldr.org/vZXo0cw

Je n'arrives pas à trouver où se situe le problème.
Une suggestion ?
Merci d'avance!

04/08/2012, 09h07
SpaceFrog

Je n'ai pas de microscope sous la main ...
04/08/2012, 10h07
Roland_Y

Mea Maxima Culpa...
Corrigé!
06/08/2012, 20h01
NoSmoking

Bonjour,
lorsque l'on clique sur Projects la liste des projets apparaît bien !

Le problème est-il autre ?
07/08/2012, 18h29
Roland_Y

En fait, la liste des projets affichées n'est pas un résultat de requête Javascript, mais juste une liste hardcodée en HMTL que j'ai écrite moi même, comme solution temporaire.

Le problème initial reste toujours.
J'ai comme l'impression que le script ne fonctionne pas parce qu'utilisant une version non à jour de l'API Github, qui est passé en v3.
Mais je ne sais pas comment le corriger...
07/08/2012, 23h41
NoSmoking

je ne vois pas ou est intégré le script dans ta page.

Comme je le disais tantôt, je l'avais simplement désacitivé.
J'ai remis en place le script qui posait problème.
Voici la page en question : Projects.html
Code:

1 2 3 4 5 6 7 8 9  <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> 
Le script intègre un fichier js (git.js), dont , je le rappelle, voici le contenu.

Cependant, il y a du nouveau. Je pense avoir compris d'où vient le problème, mais je ne sais pas comment le corriger, vu que je n'ai pas une bonne connaissance du Javascript.

Sous Google Chrome, avec F12, j'accède à une console permettant d'exécuter du code javascript et jQuery.
Je me connecte à Github, et j'envoie la requête suivante.

Code:

$.getJSON('//api.github.com/users/Yonaba/repos',{},function(data){console.log(data)})

Oh surprise, j'obtiens ceci (cliquez pour argandir)
http://ompldr.org/tZjE4MA

Et apparemment, cela fonctionne très bien. Donc, j'ai essayé de modifier le code de la fonction githubUser dans le fichier git.js.
Cependant, j'ai effectué le test en local uniquement, sur mon PC.
Voici le nouveau code que j'ai donc essayé.
Code:

1 2 3 jQuery.githubUser = function(username, callback) { jQuery.getJSON('//api.github.com/users/'+username+'/repos',{},function(data){console.log(data)}) }
Et j'obtiens quelque chose de révélateur (cliquez pour élargir).
http://ompldr.org/tZjE4Ng

Apparemment, le callback data de la fonction githubUser ne reçoit rien (null), et donc n'arrive pas à lire ses propriétés.
Une idée ?

Déjà, merci NoSmoking.

Juste pour mentionner que j'ai pu résoudre le problème.
C'était assez simple en fait.

Code:

1
2
3
4
 
jQuery.githubUser = function(username, callback) {
   jQuery.getJSON('https://api.github.com/users/'+username+'/repos?callback=?',callback)
}

Et ensuite:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
    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.data; // Correction (JSON Parsing)
        sortByName(repos);	
 
        //etc etc (reste du code)
		  }
        });		
      });
 
      function sortByName(repos) {
        repos.sort(function(a,b) {
          return a.name - b.name;
        });
      }
    };

Et voilà le script en action: projects.html

Merci quand même! :ccool:

EDIT: Récapitulatif ici.