GitHub API mit Angular - wie man öffentliche Repos des Benutzers erhält?

Ich versuche, die Repos-Zählung jedes eckigen Organisationsmitglieds auf GitHub auszudrucken. Es ist mir bereits gelungen, alle Benutzernamen zu drucken, aber ich kann die Repos nicht ausdrucken und weiß nicht, was sie verursacht.GitHub API mit Angular - wie man öffentliche Repos des Benutzers erhält?

Hier ist mein HTML:

<!DOCTYPE html> 
<html lang="en" ng-app="myApp"> 
<head> 
    <meta charset="utf-8"> 
    <title>GitHub App</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="app.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
    <script src="app.js"></script> 
    <script src="cntrlr.js"></script> 
</head> 
<body ng-controller="myctrl"> 
    <h1>GitHub users ranking</h1> 
    <h3>{{org.login}}</h3> 
    {{user.public_repos}} 
<p ng-repeat="user in memberall">{{user.login}}, {{user.public_repos}}</p> 
</div> 
</body> 
</html>

Und die JS:

var myAppModule = angular.module('myApp', []) 
.controller('myctrl', ['$scope', '$http', function($scope, $http){ 
    $http({ 
      method: 'GET', 
      url: 'https://api.github.com/orgs/angular'+ '?access_token=xxx' }) 
      .then(function(response) { 
      $scope.org = response.data; 
     }, function(error) { 
      displayError("Something went wrong"); 
     }); 

    $http({ 
      method: 'GET', 
      url: 'https://api.github.com/orgs/angular/members'+ '?access_token=xxx' }) 
      .then(function(response) { 
      $scope.members = response.data; 
     }, function(error) { 
      displayError("Something went wrong"); 
     }); 

    $http({ 
      method: 'GET', 
      url: 'https://api.github.com/orgs/angular/members?page=2'+ '&access_token=xxx' }) 
      .then(function(response) { 
      $scope.members2 = response.data; 
     }, function(error) { 
      displayError("Something went wrong"); 
     }); 

    $http({ 
      method: 'GET', 
      url: 'https://api.github.com/orgs/angular/members?page=3'+'&access_token=xxx' }) 
      .then(function(response) { 
      $scope.members3 = response.data; 
     }, function(error) { 
      displayError("Something went wrong"); 
     }); 

    $http({ 
      method: 'GET', 
      url: 'https://api.github.com/users' + '?access_token=xxx' }) 
      .then(function(response) { 
      $scope.user = response.data; 
      $scope.memberall = $scope.members.concat($scope.members2, $scope.members3); 
       for(var index = 0; index < $scope.memberall.length; index++) { 
        $http.get("https://api.github.com/users/" + $scope.memberall[index].login + '?access_token=xxx'); 
        $scope.repos = response.data[index].public_repos; 
       } 
      }, function(error) { 
      displayError("Something went wrong"); 
}); 
    }]);

Ich würde wirklich schätzen, wenn mir jemand sagen würde, was Fehler habe ich machen.

Quelle

2016-08-08 summerfreeze

Sie rufen nur $ http, aber nicht die zurückgegebenen Daten.

$http.get("https://api.github.com/users/" + $scope.memberall[index].login).then(function(res) { 
    console.log(res.data.public_repos); 
});

Dadurch erhalten Sie die Repos-IDs.

Sie können die tatsächlichen repos an dieser URL erhalten (ersetzen Sie die 'xxx' mit Ihrem Token):

'https://api.github.com/users/' + $scope.memberall[index].login + '/repos'

EDIT: Der Schlüssel hier ist Array.ForEach() zu verwenden, so dass Sie nicht tun habe mit Array-Indizes spielen (was für Schleife, da $ http „erzeugt“ ein neuer Rahmen und die Variable i nicht zugänglich ist innen nicht mit einem einfachen arbeiten)

var myAppModule = angular.module('myApp', []) 
 
.controller('myctrl', ['$scope', '$http', function($scope, $http){ 
 
    $http({ 
 
      method: 'GET', 
 
      url: 'https://api.github.com/orgs/angular'+ '?access_token=xxx' }) 
 
      .then(function(response) { 
 
      $scope.org = response.data; 
 
     }, function(error) { 
 
      displayError("Something went wrong"); 
 
     }); 
 

 
    $http({ 
 
      method: 'GET', 
 
      url: 'https://api.github.com/orgs/angular/members'+ '?access_token=xxx' }) 
 
      .then(function(response) { 
 
      $scope.members = response.data; 
 
     }, function(error) { 
 
      displayError("Something went wrong"); 
 
     }); 
 

 
    $http({ 
 
      method: 'GET', 
 
      url: 'https://api.github.com/orgs/angular/members?page=2'+ '&access_token=xxx' }) 
 
      .then(function(response) { 
 
      $scope.members2 = response.data; 
 
     }, function(error) { 
 
      displayError("Something went wrong"); 
 
     }); 
 

 
    $http({ 
 
      method: 'GET', 
 
      url: 'https://api.github.com/orgs/angular/members?page=3'+'&access_token=xxx' }) 
 
      .then(function(response) { 
 
      $scope.members3 = response.data; 
 
     }, function(error) { 
 
      displayError("Something went wrong"); 
 
     }); 
 

 
    $http({ 
 
      method: 'GET', 
 
      url: 'https://api.github.com/users' + '?access_token=xxx' }) 
 
      .then(function(response) { 
 
      $scope.user = response.data; 
 
      $scope.memberall = $scope.members.concat($scope.members2, $scope.members3); 
 
       $scope.memberall.forEach(function(value, index) { 
 
        $http.get("https://api.github.com/users/" + value.login + '?access_token=xxx').then(function(res) { 
 
        //console.log(res.data.public_repos); 
 
        value.nbrRepos = res.data.public_repos; 
 
        }); 
 
       }) 
 
      }, function(error) { 
 
      displayError("Something went wrong"); 
 
}); 
 
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myctrl"> 
 
<h1>GitHub users ranking</h1> 
 
    <h3>{{org.login}}</h3> 
 
    {{user.public_repos}} 
 
<p ng-repeat="user in memberall">{{user.login}}, {{user.nbrRepos}}</p> 
 
</div>

Quelle

2016-08-08 12:06:45 gyc

Vielen Dank, Ihr Code gibt die Anzahl der Repos in der Konsole aus, aber es tut nichts im HTML und ich möchte die Anzahl der Repos neben den Logins anzeigen. – summerfreeze

@Dorota Ich habe das Snippet bearbeitet, so dass es die Anzahl der Repos pro Benutzer zeigt – gyc

Sir, du hast gerade meinen Tag gemacht. Vielen Dank. – summerfreeze

GitHub API mit Angular - wie man öffentliche Repos des Benutzers erhält?

Antwort

Verwandte Themen