Consuming REST service using AngularJS

Question

I have a REST Service written in Java which returns an array of data in JSON like this:

[{"key":"London","value":"51.30"}]

Now I'm trying code an AngularJS REST clients using the AJS documentation. So far I've been able to invoke the REST service (I can see from the server logs) yet nothing is printed in the HTML page. Here is my code:

<!doctype html>
<html  >
  <head>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.js"></script>
         <script language="javascript">


      angular.module('myApp',['ngResource']);
            function Ctrl($scope,$resource) {
              var Geonames = $resource(
              'http://localhost:8080/rest-application/rest/json', {     
               }, {
               query: { method: 'GET', isArray: true },
               create: { method: 'POST' }
            }
          );
          $scope.objs = Geonames.query();
         };
         Ctrl.$inject = ['$scope','$resource'];

  </script>
 </head>

    <body >
       <div ng-app="myApp">
              <div ng-controller="Ctrl">
                 {{objs.key}} - {{objs.value}}

              </div>
           </div>
    </body>
</html>

I have tried this example with several small variants taken from tutorials yet it is still not working. Any help ?
Thanks!

Pieter Herroelen · Accepted Answer · 2014-04-09T13:32:14.853

1

What you get back from query() is an array so you should loop over it with ng-repeat

 <div ng-app="myApp">
    <div ng-controller="Ctrl">
       <ul>
           <li ng-repeat="obj in objs">{{obj.key}} - {{obj.value}}</li>
       </ul>
    </div>
 </div>

edited Apr 09 '14 at 13:32

answered Apr 09 '14 at 13:18

Pieter Herroelen

5,732
2
27
35

Just my two cents but, this way you are repeating the `
– GonchuB Apr 09 '14 at 13:28
@GonchuB you are 100% correct, i've modified my code – Pieter Herroelen Apr 09 '14 at 13:32
Thanks for your reply- I've checked out the result but it is still displaying anything, even if the REST service is being called. An alert of $scope.objs after the query() method displays an empty String. – user2824073 Apr 09 '14 at 13:38
Can you check if the server returns data? You can check that in the Network tab of Chrome Dev Tools. – Pieter Herroelen Apr 09 '14 at 13:45
Thanks for the clue. Well from the Chrome console I can see an error message: "XMLHttpRequest cannot load http://localhost:8080/rest-application/rest/json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. " – user2824073 Apr 09 '14 at 13:53
Solved it. By embedding it within the Web application works. Thanks for your help! – user2824073 Apr 09 '14 at 13:56
Now it's time to read up on CORS. If you're using servlets, you can solve this using a servlet filter such as https://github.com/eBay/cors-filter. If you just want to test things, you can also disable web security in Chrome: http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome – Pieter Herroelen Apr 09 '14 at 13:58
Embedding it within the Web application is another option, but it slows down your development because you always have to redeploy. What we do in fact is use Apache as a proxy to forward all requests to localhost:80/rest to localhost:8080/rest so you don't run into CORS errors – Pieter Herroelen Apr 09 '14 at 14:11

GonchuB · Answer 2 · 2014-04-09T13:59:55.563

First of all, let's organize your code a bit:

var app = angular.module('myApp',['ngResource']);
// Controllers get their dependencies injected, as long as you don't minify your code and lose variable names.
app.controller('Ctrl', function($scope, $resource) {
    $scope.objs = []; // We initialize the variable for the view not to break.
    // For the query example, you don't need to define the method explicitly, it is already defined for you.
    var Geonames = $resource('http://localhost:8080/rest-application/rest/json');
    // Resource methods use promises, read more about them here: http://docs.angularjs.org/api/ng/service/$q
    Geonames.query({}, function(arrayResult) {
        $scope.objs = arrayResult;
    });
});

You have to adjust your html code with an ng-repeat directive to handle each item of your array:

<body>
    <div ng-app="myApp">
        <div ng-controller="Ctrl">
            <!-- object is a reference for each item in the $scope.objs array-->
            <span ng-repeat="object in objs">
                {{object.key}} - {{object.value}}
            </span>
        </div>
    </div>
</body>

Thanks for your contribute. I've tested the code with the changes; unfortunately it does not work and from the logs I can see that the REST service is not being called anymore. — user2824073, Apr 09 '14 at 13:42
My bad, you do need the `ngResource` module. Does it work that way? — GonchuB, Apr 09 '14 at 13:59

Consuming REST service using AngularJS

2 Answers2