AngularJS - accessing http headers

Question

I am trying to access the http headers in my angular controller but I am getting undefined. Also, I am able to see the header response in my angular service which is not reflecting in my controller. Can someone please tell me what I am missing? Please see the code below:

Service:

cmApp.service('supplierService', function ($http, $q) {
    this.getSuppliers = function (orderByColumn, skipRows, takeRows) {
        var deferred = $q.defer();
        $http({
            method: 'GET',
            url: 'api/supplier',
            params: { orderBy: orderByColumn, skip: skipRows, take: takeRows },
            timeout: 30000, 
            cache: false
        }).
        success(function (data, status, headers, config) {
            // any required additional processing here            
            deferred.resolve(data, status, headers, config);            
        }).
        error(function (data, status) {
            deferred.reject(data, status, headers, config);
        });
        return deferred.promise;        
    }

Controller:

   supplierService.getSuppliers($scope.orderby, $scope.skip, $scope.take)
        .then(function (data, status, headers, config) {
            **//getting undefined here.**
            $scope.totalRecords = parseInt(headers('X-TotalRowCount'));                
            $scope.suppliers = data;
        }, function (error) {
            // error handling here
        });

Please look into $httpProvider. Use that to control your header. — kroonwijk
– kroonwijk, Commented Oct 18, 2013 at 16:52

user972255 · Accepted Answer · 2013-10-18 17:02:50Z

18

I have found the solution by myself. All I have to do is create an array and add all those values to the same & return it to the controller. Please see the updated code below:

Service:

cmApp.service('supplierService', function ($http, $q) {
    this.getSuppliers = function (orderByColumn, skipRows, takeRows) {
        var deferred = $q.defer();
        $http({
            method: 'GET',
            url: 'api/supplier',
            params: { orderBy: orderByColumn, skip: skipRows, take: takeRows },
            timeout: 30000, 
            cache: false
        }).
        success(function (data, status, headers, config) {
            // any required additional processing here 
            var results = [];
            results.data = data;
            results.headers = headers();
            results.status = status;
            results.config = config;

            deferred.resolve(results);            
        }).
        error(function (data, status) {
            deferred.reject(data, status, headers, config);
        });
        return deferred.promise;        
    }

Controller:

supplierService.getSuppliers($scope.orderby, $scope.skip, $scope.take)
            .then(function (response) {                
                $scope.suppliers = response.data;
                $scope.totalRecords = parseInt(response.headers["x-totalrowcount"]);                
            }, function (error) {
                // error handling here
            });

answered Oct 18, 2013 at 17:02

user972255

1,83811 gold badges32 silver badges53 bronze badges

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

1 Comment

John Ding Over a year ago

In controller, should be like this:$scope.totalRecords = parseInt(response.headers("x-totalrowcount")); this work for me at lease.

Jason · Accepted Answer · 2014-01-10 20:31:54Z

6

This question is old, but $http() returns a promise itself. you can just return that from your service, no need to create a new promise. You can do this even after using .success() and .error(), or for that matter even after using a .then(), they keep chaining.

answered Jan 10, 2014 at 20:31

Jason

5746 silver badges13 bronze badges

Comments

Amardeep Kohli · Accepted Answer · 2017-08-21 05:45:02Z

1

I had to access Token and TokenExpiry time from response headers of my Rest Service,then store it in my $rootScope. Here is the code I used:

                $scope.Authenticate=function(){
                  var EncDecUserPass=decodeURIComponent(encodeURIComponent($scope.LoggedUserName+':'+$scope.LoggedUserPassword))  ;
                  $http(
                    {method: 'GET',
                     url: 'http://localhost:53256/api/Products/Authenticate',
                     cache: false,
                     headers:{'Authorization':'Basic '+window.btoa(EncDecUserPass)}
                   }
                   ).success(function(data, status, headers, config) {
                      //Here it goes
                      $rootScope.token=headers().token;
                      $rootScope.tokenExpirySec=headers().tokenexpiry;
                  }).error(function(data, status, headers, config) {
                    alert('Invalid User');
                  });
                }

answered Aug 21, 2017 at 5:45

Amardeep Kohli

5123 silver badges7 bronze badges

1 Comment

Sahil Dhir Over a year ago

nice approach !!

Collectives™ on Stack Overflow

AngularJS - accessing http headers

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related