Angular возвращает пустые response.data из json api

Question

ng-repeat возвращает пустое значение, я новичок в Angular.Я проверил на ошибки, но не нашел ни одного.Я действительно не знаю, что здесь не так.

(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;
};
  });

}());

ниже приведен HTML-код, где я хотел отобразить репозиторий определенных пользователей на 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

Проблема в том, что выполняемые вами HTTP-вызовы являются асинхронными, поэтому при выполнении второго у вас еще нет пользователя.Вы должны объединить обещания.И если вы не собираетесь использовать пользователя где-либо, только для второго вызова, то вы можете упростить свой код:

$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);

Первый , затем выполняется, когда первый get прошло успешно, поэтому я вызываю второе get .Затем второй затем выполняется, когда второй HTTP-вызов успешен.Таким образом, мы объединили оба обещания.

Я написал полный пример на JSFiddle .

Но я скопировал здесь полный код, так что это может бытьполезно для других:

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>

Answer 2

Попробуйте вызвать $ http.get ($ scope.user.repos) .then (onRepos, onReposError);внутри функции onUserComplete.Угловые методы модуля http являются асинхронными.Поэтому после выполнения вызова get или post, angular забудет об этом и продолжит выполнение.