Using $http in AngularJS + WebAPI

Question

I am trying to print out list of categories using AngularJS on top of WebAPI. I have the following page and when I navigate to it, I get alert message containing "-1".

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.min.js"></script>
<script language="javascript">
    var myApp = angular.module('myApp', []);

    myApp.service('categoriesService', function ($http) {
        delete $http.defaults.headers.common['X-Requested-With'];
        this.getData = function () {
            // $http() returns a $promise that we can add handlers with
.then()
            return $http({
                method: 'GET',
                url: 'https://www.example.com/api/categories'
            });
        }
    });

    myApp.controller('CategoriesCtrl', function ($scope, categoriesService) {
        $scope.data = null;
        categoriesService.getData().then(function (response) {
            $scope.data = response;
        }, function (response) {
            alert(response.status);
        });
    });
</script>
</head>
<body ng-app="myApp">
    <div  ng-controller="CategoriesCtrl">
        <ul>
            <li ng-repeat="category in data">
                {{ category.Name }}
            </li>
        </ul>
    </div>
</body>
</html>

What am I doing wrong? I tried samples from here: How to use HTTP.GET in AngularJS correctly? In specific, for an external API call? and here AngularJS not displaying API data

gyc · Accepted Answer · 2016-12-01 10:48:55Z

1

Your service returns a promise but when the promise resolves no data is returned:

this.getData = function () {
  return $http.get('https://www.example.com/api/categories').then(
    function(response) {
      console.log(response);
      return response;
    },
    function(error) {
      console.log(error);
      return error;
    }
  });
}

answered Dec 1, 2016 at 10:48

gyc

4,3586 gold badges37 silver badges55 bronze badges

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

1 Comment

eXPerience Over a year ago

Thank you! There was ALSO an issue with CORS. After following advices in this topic, I configured that as well and everything worked.

Suren Srapyan · Accepted Answer · 2016-12-01 10:29:18Z

1

You did't inject the categoriesService into your controller, but instead injected a dataService. Try this

myApp.controller('CategoriesCtrl', function ($scope, categoriesService) {
        $scope.data = null;
        categoriesService.getData().then(function (response) {
            $scope.data = response;
        }, function (response) {
            alert(response.status);
        });
    });

answered Dec 1, 2016 at 10:29

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

1 Comment

eXPerience Over a year ago

Thanks a lot for the heads up! But the result remains the same, alert with "-1" message

Collectives™ on Stack Overflow

Using $http in AngularJS + WebAPI

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related