AngularJS Rest Service returns data, but not showing on page

Question

I am trying to teach myself building RESTful API's and I am just using angular to try to display what I retrieve. I can see in the console that my RESTful call works as it is returning data. However when it is doing the assignment it seems like it all gets lost.

I feel like I am overlooking something simple but I've been staring at it so long now that I have come to seek some help.

Thanks

This is my index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HR Test</title>
</head>
<body>
  <div ng-app="myApp" ng-controller="EmployeeCtrl">
    <table>
     <tr ng-repeat="employee in employeeList">
      <td>{{employee.firstName}}</td>
      <td>{{employee.lastName}}</td>
     </tr>
    </table>
  </div>

  <script type="text/javascript" src="angular.min.js"></script>
  <script type="text/javascript" src="angular-resource.min.js"></script>
  <script type="text/javascript" src="main.js"></script>
</body>
</html>

This is my main.js

    var myApp = angular.module('myApp', ['ngResource'])
   .controller('EmployeeCtrl', function($scope, $resource, employeeService) {
      // employeeService here has nothing
      $scope.employeeList = [employeeService];
    })
    .factory('employeeService', function ($resource) {
        var source = $resource(
            'http://localhost:8060/RESTExample/REST/WebService/Employee');
        var data =source.query({},function(){
          //this log shows the data
        console.log (data);})
        return data;
    });

this is because your employeeService doesn't really return data, though it should return a promise — SoluableNonagon
– SoluableNonagon, Commented Dec 23, 2015 at 21:27

SoluableNonagon · Accepted Answer · 2015-12-23 21:59:01Z

2

This is what your code should look like:

var myApp = angular.module('myApp', ['ngResource'])
.controller('EmployeeCtrl', function($scope, $resource, employeeService) {
  // employeeService here has nothing
  //$scope.employeeList = [employeeService]; // incorrect, you're assigning a service into the first element of an array
    employeeService.then(function(success){
        $scope.employeeList = success.data;
    }, function(error){

    });
})
.factory('employeeService', function ($resource) {
    return $resource('http://localhost:8060/RESTExample/REST/WebService/Employee').get();

or use $http

.factory('employeeService', function ($http) {
    return $http.get('http://localhost:8060/RESTExample/REST/WebService/Employee');

edited Dec 23, 2015 at 21:59

answered Dec 23, 2015 at 21:29

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

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

5 Comments

Derek Hansen Over a year ago

I copied the modification you made and I am getting this: TypeError: Object doesn't support property or method 'then'. I thought of combining your modification with jfadich's and I received the same thing.

Derek Hansen Over a year ago

Appreciate the response. It's now giving me along with the same error an "Error: [$resource:badcfg]" with the link to the restful API. I'll take what you have given me and see if I can work it out. Thanks for the time.

SoluableNonagon Over a year ago

try switching to the $http service @DerekHansen

Josh Beam Over a year ago

@DerekHansen, "Error: [$resource:badcfg]", means you're returning either an array when $resource expects an object, or an object when $resource expects an array. Please show the full error message to help enlighten everyone.

Derek Hansen Over a year ago

@SoluableNonagon Thanks! That did it. I'll definitely spend some time so I know the difference. Just trying to do a proof of concept as I'm going.

jfadich · Accepted Answer · 2015-12-23 22:13:19Z

1

Factories should return an object that is used to query data. It shouldn't return data itself.

.controller('EmployeeCtrl', function($scope, $resource, employeeService) {
     // employeeService here has nothing
     employeeService.getEmployees().then(function(data){
         $scope.employeeList = data;
     });
})
.factory('employeeService', function ($resource) {
    return {
        getEmployees: function() {
            var source = $resource(
            'http://localhost:8060/RESTExample/REST/WebService/Employee');
            return source.get().$promise;
        }
});

edited Dec 23, 2015 at 22:13

answered Dec 23, 2015 at 21:29

jfadich

6,3882 gold badges23 silver badges32 bronze badges

3 Comments

Derek Hansen Over a year ago

I appreciate the response, I tried this as well as SoluableNonagon's final response and I am getting a Object doesn't support property or method 'then' as well as a [$resource:badcfg] with the link to my restful API. I'll investigate that further. Thanks for the time.

Josh Beam Over a year ago

@DerekHansen, I would agree with this solution, especially this part: Factories should return an object that is used to query data. The implementation may differ, but this concept is on the right track.

jfadich Over a year ago

@DerekHansen I've updated my answer. Take a look at the return from getEmployees it now returns $promise

Collectives™ on Stack Overflow

AngularJS Rest Service returns data, but not showing on page

2 Answers 2

5 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Related