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-09 13:32:14Z

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 9, 2014 at 13:32

answered Apr 9, 2014 at 13:18

Pieter Herroelen

6,0862 gold badges33 silver badges37 bronze badges

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

8 Comments

GonchuB Over a year ago

Just my two cents but, this way you are repeating the <ul> structure, so you will have several <ul>'s each with only one <li>. Maybe placing the ng-repeat on the <li> would be better? What do you think? (Just talking semantics here)

Pieter Herroelen Over a year ago

@GonchuB you are 100% correct, i've modified my code

user2824073 Over a year ago

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.

Pieter Herroelen Over a year ago

Can you check if the server returns data? You can check that in the Network tab of Chrome Dev Tools.

user2824073 Over a year ago

Thanks for the clue. Well from the Chrome console I can see an error message: "XMLHttpRequest cannot load 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. "

|

GonchuB · Accepted Answer · 2014-04-09 13:59:55Z

1

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>

edited Apr 9, 2014 at 13:59

answered Apr 9, 2014 at 13:24

GonchuB

7055 silver badges8 bronze badges

2 Comments

user2824073 Over a year ago

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.

GonchuB Over a year ago

My bad, you do need the ngResource module. Does it work that way?

Collectives™ on Stack Overflow

Consuming REST service using AngularJS

2 Answers 2

8 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related