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

**Roland_Y** · 03/08/2012, 21h20

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>
 
<!-- 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>
 
<!-- End GitHub repo code -->
 
</body>

Et le fichier git.js contient le code suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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é.

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

**SpaceFrog** · 04/08/2012, 09h07

Je n'ai pas de microscope sous la main ...

**Roland_Y** · 04/08/2012, 10h07

Mea Maxima Culpa...
Corrigé!

**NoSmoking** · 06/08/2012, 20h01

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

Le problème est-il autre ?

**Roland_Y** · 07/08/2012, 18h29

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

**NoSmoking** · 07/08/2012, 23h41

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

**Roland_Y** · 08/08/2012, 19h22

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<!-- 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>
<!-- End GitHub repo code -->

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Oh surprise, j'obtiens ceci (cliquez pour argandir)

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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).

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.

**Roland_Y** · 13/08/2012, 20h02

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Et ensuite:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

EDIT: Récapitulatif ici.

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

JavaScript

Discussions similaires

Partager

Partager