use angular.js to get data from a web endpoint

Question

I need to use angular in order to get data from a web endpoint to fill this table. I have a list created with random names, but I need it to filled with data from a link instead. I still need to create the social media links as well. Either way, can someone show me how to do it keeping in mind that I don't know much about angular at all. thank you.

html:

<!DOCTYPE html>  
 <html>  
 <head>  
   <title>Angular JS </title>  
   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
   <script type="text/javascript" src="folder/main.js"></script> 
   <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" type="text/css" href="css/main.css">
 </head>  
 <body ng-app="MyForm">  
   <div ng-controller="myCtrl">  
     <h3>List students</h3>  
     <div class="container-fluid">  
       <pre>Click header link to sort, input into filter text to filter</pre>  
       <hr />  
       <table class="table table-striped">  
         <thead>  
           <tr>  
             <th>Edit</th>  
             <th>  
               <a href="" ng-click="order('name')">ID</a>  
             </th>  
             <th><a href="" ng-click="order('age')"> Name</a> </th>  
             <th><a href="" ng-click="order('gender')">Social Media</a> </th>  
           </tr>  
         </thead>  
         <tbody>  
           <tr>  
             <td>Filter =>></td>  
             <td> <input type="text" ng-model="search.name" /></td>  
             <td> <input type="text" ng-model="search.age" /> </td>  
             <td><input type="text" ng-model="search.gender" /> </td>  
           </tr>  
           <tr ng-repeat="user in students | orderBy:predicate:reverse | filter:paginate| filter:search" ng-class-odd="'odd'">  
             <td>  
               <button class="btn">  
                 Edit  
               </button>  
             </td>  
             <td>{{ user.name}}</td>  
             <td>{{ user.age}}</td>  
             <td>{{ user.gender}}</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>

js:

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

the data looks like this:

{"id":"11","name":"A Cooperativa","full_address":"Rua Bar\u00e3o de Viamonte 5, 2400-262 Leiria","location":"Leiria","council":"Leiria","country":"Portugal","lat":"39.7523042","lng":"-8.7825576","type":"various","facebook":"https:\/\/www.facebook.com\/pages\/A-Cooperativa-MerceariaTasca\/1559630810945570","facebook_id":"","gmaps":"https:\/\/www.google.pt\/maps\/place\/R.+Bar%C3%A3o+de+Viamonte+5,+2410+Leiria\/@39.7523042,-8.7825576,17z\/data=!3m1!4b1!4m2!3m1!1s0xd2273a29462db11:0x49a3f9a45cd9eb80","tripadvisor":"http:\/\/www.tripadvisor.com\/Restaurant_Review-g230085-d8154189-Reviews-A_Cooperativa-Leiria_Leiria_District_Central_Portugal.html","zomato":"","website":"","email":"[email protected]","telephone":"912635324","active":"1","updated":"2015-08-17 09:01:05"}

Check if you're linking the script properly

Ladmerc
– Ladmerc

2016-09-25 16:32:22 +00:00
Commented Sep 25, 2016 at 16:32 — Ladmerc
– Ladmerc, Commented Sep 25, 2016 at 16:32

Stefan Rein · Accepted Answer · 2016-09-25 16:58:43Z

1

I'm not sure if I did get this right, but: You want to get the students from a web endpoint as json?

Then you would write something like this in angular:

app.controller('myCtrl', function ($scope, $http) {  
    ...
    $scope.students = [];  
    $scope.totalItems = 0;

    $http.get('https://www.domain.com/api/resource')
        .then(function success(response) {
            $scope.students = response.data;
            $scope.totalItems = $scope.students.length;
        }, function failed(reason) {console.log(reason);})
    ...
});

But you should use separated files, services etc.

answered Sep 25, 2016 at 16:58

Stefan Rein

9,2324 gold badges44 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

use angular.js to get data from a web endpoint

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related