rendering a table using $http angular

Question

what I'm I doing wrong here? I'm trying to render a table using angular but the table shows empty, with {{ place.id}} , {{ place.name}} and {{ place.social}} where the data should be.

 <head>  
   <title>Angular JS </title>  

   <script src="http://code.angularjs.org/1.4.8/angular.js"></script>  
   <script src="http://code.angularjs.org/1.4.8/angular-resource.js"></script>  
   <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>  
   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
   <link rel="stylesheet" type="text/css" href="css/main.css">

   <script>
      var app = angular.module('MyForm', ['ui.bootstrap', 'ngResource']);  
      app.controller('myCtrl', function ($scope, $http) { 
        $http.get('http://passarola.pt/api/places').success(function(data) {
        $scope.predicate = 'id';  
        $scope.reverse = true;  
        $scope.currentPage = 1; 
      };

      $scope.order = function (predicate) {  
        $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;  
        $scope.predicate = predicate;  
      };  

     $scope.totalItems = $scope.places.length;  
     $scope.numPerPage = 5;  
     $scope.paginate = function (value) {  
       var begin, end, index;  
       begin = ($scope.currentPage - 1) * $scope.numPerPage;  
       end = begin + $scope.numPerPage;  
       index = $scope.places.indexOf(value);  
       return (begin <= index && index < end);  
     };  
   }); 
   </script>

 </head>  

 <body ng-app="MyForm">  
   <div ng-controller="myCtrl">  
     <div class="container-fluid">  
       <pre>Passarola Beer</pre>  
       <hr />  
       <table class="table table-striped">  
         <thead>  
           <tr>  
             <th class="media_gone">  
               <a href="" ng-click="order('id')">ID</a>  
             </th>  
             <th><a href="" ng-click="order('name')"> Name</a> </th>  
             <th><a href="" ng-click="order('social')">Social Media</a> </th>  
           </tr>  
         </thead>  
         <tbody>  
           <tr>    
             <td class="media_gone2"> <input type="text" ng-model="search.id" /></td>  
             <td> <input type="text" ng-model="search.name" /> </td>    
           </tr>  
           <tr ng-repeat="place in places | orderBy:predicate:reverse | filter:paginate| filter:search" ng-class-odd="'odd'">    
             <td>{{ place.id}}</td>  
             <td>{{ place.name}}</td>  
             <td class="gender_gone">{{ place.social}}</td>  
           </tr>  
         </tbody>  
       </table>  
       <pagination total-items="totalItems" ng-model="currentPage"  
             max-size="5" boundary-links="true"  
             items-per-page="numPerPage" class="pagination-sm">  
       </pagination>  
     </div>  
   </div>  
 </body>  
 </html>

Example code:

var app = angular.module('MyForm', ['ui.bootstrap', 'ngResource']);  
   app.controller('myCtrl', function ($scope, $timeout) {  
     $scope.predicate = 'id';  
     $scope.reverse = true;  
     $scope.currentPage = 1;  
     $scope.order = function (predicate) {  
       $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;  
       $scope.predicate = predicate;  
     };  
     $scope.places = [  
       { id: 'Kevin', name: 25, social: 'boy' },  
       { id: 'John', name: 30, social: 'girl' },  
       { id: 'Laura', name: 28, social: 'girl' },  
       { id: 'Joy', name: 15, social: 'girl' },  
       { id: 'Mary', name: 28, social: 'girl' },  
       { id: 'Peter', name: 95, social: 'boy' },  
       { id: 'Bob', name: 50, social: 'boy' },  
       { id: 'Erika', name: 27, social: 'girl' },  
       { id: 'Patrick', name: 40, social: 'boy' },  
       { id: 'Tery', name: 60, social: 'girl' }  
     ];  
     $scope.totalItems = $scope.places.length;  
     $scope.numPerPage = 5;  
     $scope.paginate = function (value) {  
       var begin, end, index;  
       begin = ($scope.currentPage - 1) * $scope.numPerPage;  
       end = begin + $scope.numPerPage;  
       index = $scope.places.indexOf(value);  
       return (begin <= index && index < end);  
     };

check the browser console for errors. whenever you see the raw expressions with {{ }} rather than just blank space or your data, that is a strong indication that angular failed to load for some reason. — Claies
– Claies, Commented Sep 25, 2016 at 22:13
@Claies it says SyntaxError: missing ) after argument list and Error: [$injector:modulerr] Failed to instantiate module MyForm due to: [$injector:nomod] Module 'MyForm' is not available! — Ryuuks
– Ryuuks, Commented Sep 25, 2016 at 22:17
OK, I solved that part, but now it says Error: $scope.places is undefined and I don't know what to do — Ryuuks
– Ryuuks, Commented Sep 25, 2016 at 22:21

Sasank Sunkavalli · Accepted Answer · 2016-09-25 22:58:47Z

1

Use this controller code.

    app.controller('myCtrl', function ($scope, $http) {
    $scope.places = [];
    $http.get('http://passarola.pt/api/places').success(function(data) {
       $scope.places = data.data;
       $scope.totalItems = $scope.places.length;
       $scope.predicate = 'id';  
       $scope.reverse = true;  
       $scope.currentPage = 1; 
  };

  $scope.order = function (predicate) {  
    $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;  
    $scope.predicate = predicate;  
  };    
 $scope.numPerPage = 5;  
 $scope.paginate = function (value) {  
   var begin, end, index;  
   begin = ($scope.currentPage - 1) * $scope.numPerPage;  
   end = begin + $scope.numPerPage;  
   index = $scope.places.indexOf(value);  
   return (begin <= index && index < end);  
 };  
});

answered Sep 25, 2016 at 22:58

Sasank Sunkavalli

3,9846 gold badges35 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ngCoder Over a year ago

just for knowledge purpose can u guys post a working demo of this code ? Thanks !

Collectives™ on Stack Overflow

rendering a table using $http angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related