Lakshman Pilaka Lakshman Pilaka - 5 months ago 24
Javascript Question

ng-repeat doesn't show rows

I am trying to learn agular js and started my first code sample to get github repos of a user.

my html page is like this:

<!DOCTYPE html>
<html ng-app="githubViewer">

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="script.js"></script>
</head>

<body ng-controller="gitHubRepoController">
{{error}}
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Full Name</th>
<th>HTML Url</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="repo in repos">
<td>{{repo.name}}</td>
<td>{{repo.full_name}}</td>
<td>{{repo.html_url}}</td>
<td>{{repo.description}}</td>
</tr>
</tbody>
</table>
</body>

</html>


and my controller is like this

(function() {
var app = angular.module("githubViewer",[]);

var gitHubRepoController = function($scope, $http){
$http.get("https://api.github.com/users/lakshman553/repos")
.then(onDataDownloaded, onError);

var onDataDownloaded = function(response) {
console.log(response.data);
$scope.repos = response.data;

};
$scope.error = "some value";
var onError = function(reason) {
$scope.error = reason;
};
};

app.controller("gitHubRepoController",gitHubRepoController);
})();


angular js is loaded as it is showing the
{{error}}
is being shown on the screen as
some value


the table header is properly loaded but nothing else is shown. even the url is returning data when seen in broswer.

there are no errors in the console also.

where am i going wrong?

Answer

You need to move the declaration of your promise handlers (onDataDownloaded, onErro) to before you try to use them. Plnkr

(function() {
  console.log('this is the app')
  var app = angular.module("githubViewer",[]);

  var gitHubRepoController = function($scope, $http){  
    var onDataDownloaded = function(response) {
      $scope.repos = response.data;
    };
    var onError = function(reason) {
      $scope.error = reason;
    };
    $http.get("https://api.github.com/users/lakshman553/repos")
    .then(onDataDownloaded, onError);
  };

  app.controller("gitHubRepoController",gitHubRepoController);
})();