Consuming Wcf Data service in AngularJS

Question

Im new to AngularJS. I am trying to consume Wcf Data service with AngularJS. I keep failing as I am not sure where things are going wrong. Could someone please help me on this. Thanks.

The data service will return Json if queried like this:

http://localhost/Wcf/DataService/Report/ReportService.svc/SystemCategories?$format=json

Sample Json returned:

{"odata.metadata":"http://localhost/Wcf/DataService/Report/ReportService.svc/$metadata#SystemCategories","value":[
    {"ID":1,"SystemName":"System-A","Description":"System A"},
    {"ID":2,"SystemName":"System-B","Description":"System B"},
    {"ID":3,"SystemName":"System-C","Description":"System C"}]}

The code (sample from w3school)

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="systemCat"> 
<ul>
  <li ng-repeat="x in categories">
    {{ x.ID + ', ' + x.SystemName }}
  </li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('systemCat', function($scope, $http) {
  $http.get("http://localhost/Wcf/DataService/Report/ReportService.svc/SystemCategories?$format=json")
  .success(function (response) {$scope.categories = response.value;});
});
</script>
</body>
</html>

Daniel Cottone · Accepted Answer · 2015-07-17 12:57:39Z

1

This code should work, if not take a look at the javascript console and whatever errors you find there would give you some idea as to what is going wrong.

<script>
  var app = angular.module('myApp', []);
  app.controller('systemCat', function($scope, $http) {
    $http.get('http://localhost/Wcf/DataService/Report/ReportService.svc/SystemCategories?$format=json')
      .success(function (data) {
        console.log(data);
        $scope.categories = data.value;
      })
      .error(function (data) {
        console.log('error!');
      });
  });
</script>

answered Jul 17, 2015 at 12:57

Daniel Cottone

4,52029 silver badges39 bronze badges

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

1 Comment

Calvin Over a year ago

Daniels code will definitely help, but if you can extract your $http calls into a service, it would make your angular app much more manageable. Take a look at this plunker for some assistance plnkr.co/edit/noJMqQ?p=preview

Collectives™ on Stack Overflow

Consuming Wcf Data service in AngularJS

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related