Dorota Dorota - 4 months ago 25
AngularJS Question

GitHub API - getting an url with Angular's $scope

I'm building a small app that ranks github users. I listed of the members I need from the API and I wrote a function that should get an url from all the members. Here is my 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=MYTOKEN' })
.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=MYTOKEN' })
.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=MYTOKEN' })
.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=MYTOKEN' })
.then(function(response) {
$scope.members3 = response.data;
}, function(error) {
displayError("Something went wrong");
});
$http({
method: 'GET',
url: 'https://api.github.com/users' + '?access_token=MYTOKEN' })
.then(function(response) {
$scope.user = response.data;
$scope.login = response.data["login"];
$scope.memberall = $scope.members.concat($scope.members2, $scope.members3);
for(var i = 0; i < $scope.memberall.length; i++) {
$http.get("https://api.github.com/users/" + $scope.login + '?access_token=MYTOKEN');
}
});
}]);


I can see in the console that it tries to get all of the urls, but I keep getting
"https://api.github.com/users/undefined"
.Does anyone know the reason behind this? What can I do to put the login inside of this url and why "$scope.login" isn't working?

EDIT:
the response.data is a bunch of users, one looks like this:

{
"login": "mojombo",
"id": 1,
"avatar_url": "https://avatars.githubusercontent.com/u/1?v=3",
"gravatar_id": "",
"url": "https://api.github.com/users/mojombo",
"html_url": "https://github.com/mojombo",
"followers_url": "https://api.github.com/users/mojombo/followers",
"following_url": "https://api.github.com/users/mojombo/following{/other_user}",
"gists_url": "https://api.github.com/users/mojombo/gists{/gist_id}",
"starred_url": "https://api.github.com/users/mojombo/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/mojombo/subscriptions",
"organizations_url": "https://api.github.com/users/mojombo/orgs",
"repos_url": "https://api.github.com/users/mojombo/repos",
"events_url": "https://api.github.com/users/mojombo/events{/privacy}",
"received_events_url": "https://api.github.com/users/mojombo/received_events",
"type": "User",
"site_admin": false
},





I need this code:

$http({
method: 'GET',
url: 'https://api.github.com/users' + '?access_token=21174ee069d6ded5ae3d8ea78d73f15a4cb4890c' })
.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.login + '?access_token=21174ee069d6ded5ae3d8ea78d73f15a4cb4890c');
}
}, function(error) {
displayError("Something went wrong");
});


to find user's login and place them inside urls to GET the url for each angular's organization member. I think I'm close to the answer but I still get "https://api.github.com/users/undefined" in the console.




The final working code is:
$http({
method: 'GET',
url: 'https://api.github.com/users' + '?access_token=mytoken' })
.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=mytoken');
}
}, function(error) {
displayError("Something went wrong");
});

Answer

According to Github's API for /users, response.data is an array.

var index = 0; // Get 1st user in the array
$scope.login = response.data[index].login;

Where index is the user's index you want to access.

Edit: Since you want to iterate through that array, you could do the following:

$scope.users = response.data;
for (var index = 0; index < $scope.users.length; index++) {
    $http.get("https://api.github.com/users/" + $scope.users[index].login + "?access_token=MYTOKEN")
    .then(function(data) { 
        // do something on success 
    });
}

or

$scope.users = response.data;
$scope.users.forEach(element, index) {
    $http.get("https://api.github.com/users/" + element.login + "?access_token=MYTOKEN")
    .then(function(data) { 
        // do something on success 
    });
}

Note however, according to the API docs, the data that GET /users/:username will return, is already contained in the array GET /users returned. You can loop through the users data you already have - and print their JSON data for example:

$scope.users = response.data;
for (var index = 0; index < $scope.users.length; index++) {
    console.log("#" + index + " user: " + $scope.users[index]);
}

But it all boils down to what your end goal is.