Angular returns blank response.data from json api

Question

ng-repeat returns blank, I am new to Angular. I checked for errors but found none. I really do not know what is wrong here.

(function() {

  var app = angular.module("testApp", []);

  app.controller("MainController", function($scope, $http) {
   $scope.search = function(username) {
  $http.get("https://api.github.com/users/" + username)
    .then(onUserComplete, onError);

  $http.get($scope.user.repos)
    .then(onRepos, onReposError);
};

var onUserComplete = function(response) {
  $scope.user = response.data;
};

var onRepos = function(response) {
  $scope.repos = reponse.data;
};
  });

}());

below is the HTML, where I wanted to display the repository of particular users on GitHub:

  <table>
    <thead>
      <tr>
       <th>Name</th>
       <th>Stars</th>
       <th>Language</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="repo in repos">
        <td>{{repo.name}}</td>
        <td>{{repo.stargazers_count }}</td>
        <td>{{repo.language}}</td>
      </tr>
    </tbody>
  </table>

Answer 1

Try to call $http.get($scope.user.repos) .then(onRepos, onReposError); inside onUserComplete function. Angular http module methods are async . So after making a get or post call ,angular will forget about it and continue with the execution.

Answer 2

The problem is that the HTTP calls you're doing are asynchronous, so when you execute the second one, you don't have the user yet. You must concatenate the promises. And if you're not going to use the user anywhere, only for the second call, then you could simplify your code:

$http.get("https://api.github.com/users/" + username)
     .then(function(response) {
         return $http.get(response.data.repos_url);
     })
     .then(function(response) {
         $scope.repos = reponse.data;
     }, 
     onError);

The first then is executed when the first get is successful, so I call the second get . Then the second then is executed when the second HTTP call is successful. This way we have concatenated both promises.

I've written a complete example at JSFiddle .

But I've copied here the complete code, so it could be useful for others:

AngularJS

var myModule = angular.module('myModule', []);

myModule.controller('myController', ['$http', function ($http) {
    var $ctrl = this;
    $ctrl.username = null;
    $ctrl.repos = null;


    $ctrl.getRepositoryData = function () {   
        $ctrl.repos = null;
        $http.get('https://api.github.com/users/' + $ctrl.username)
             .then(function(response) {
                 return $http.get(response.data.repos_url);
             })
             .then(function(response) {
                 $ctrl.repos = response.data;
             }, 
             function (error) {
                 console.log('Error happened:', error);
             });
    };
}]);

HTML

<div ng-app="myModule">
    <div ng-controller="myController as ctrl">
        <div>
            <input type="text" ng-model="ctrl.username"/>
            <button type="button" ng-click="ctrl.getRepositoryData()">
                Get Repos
            </button>
            <p>User repositories: {{ctrl.repos}}</p>
        </div>
   </div>
</div>