Search code examples
javascriptangularjsapiangular-httpangular-http-interceptors

Why is $httpProvider.interceptors returning an `undefined` value


I've created a basic AngularJS app that consumes Yelp's API and am having trouble using $httpProvider.interceptors to parse my response.

Here is my app:

var app = angular.module("restaurantList", []);

My yelpAPI service (not pictured) authenticates my API request and generates a HTTP request. I then output the data received to the Web Console like so:

app.controller("mainCtrl", ["$scope", "yelpAPI", function ($scope, yelpAPI) {
    $scope.restaurants = [];
    yelpAPI.get(function (data) {
        $scope.restaurant = data;

        console.log($scope.restaurant);

    });

}]);

Here is data from my request:

Object {region: Object, total: 37, businesses: Array[20]}

I want the array located in the businesses property. So, I figured it would be a good idea to use $httpProvider.interceptors to parse the objects found, in the Object.businesses array.

Here is what $httpProvider.interceptors looked like, when I made my initial request:

app.config(function ($httpProvider) {
    $httpProvider.interceptors.push(function () {
        return {
            response: function (response) {

                return response;
            }
        }
    });
});

Here is what $httpProvider.interceptors looks like now:

app.config(function($httpProvider) {
    $httpProvider.interceptors.push(function() {
        return {
            response: function(response) {

                var old_response = response.businesses,
                    new_response = [];


                for (var i = 0; i < old_response.length; i++) {

                    var obj = old_response[i],

                        new_obj = {
                            restaurant_name: obj.name,
                            phone_number: obj.display_phone,
                            yelp_rating: obj.rating,
                            reservation_url: obj.reservation_url
                        };

                    new_response.push(new_obj);
                }

                return new_response;
            }
        }
    });
});

Now, I'm receiving an error that says TypeError: Cannot read property 'businesses' of undefined. Is there something I'm overlooking?

EDIT #1

I used console.log(response) inside the interceptor to print my response and found that response.businesses should actually be response.data.businesses. Which resolves my error but now my $http call returns undefined. Any idea what my new problem could be?

EDIT #2

app.factory("yelpAPI", function($http, nounce) {
    return {
        get: function(callback) {
            var method = "GET",
                url = "http://api.yelp.com/v2/search";
            var params = {
                callback: "angular.callbacks._0",
                oauth_consumer_key: "my_oauth_consumer_key",
                oauth_token: "my_oauth_token",
                oauth_signature_method: "HMAC-SHA1",
                oauth_timestamp: new Date().getTime(),
                oauth_nonce: nounce.generate(),
                term: "American",
                sort: 2,
                limit: 20,
                radius_filter: 4000,
                deals_filter: true,
                actionlinks: true
            };
            var consumerSecret = "my_consumer_secret",
                tokenSecret = "my_token_secret",
                signature = oauthSignature.generate(method, url, params, consumerSecret, tokenSecret, {
                    encodeSignature: false
                });
            params["oauth_signature"] = signature;
            $http.jsonp(url, {
                params: params
            }).success(callback);
        }
    }
});

Solution

  • In return angular wait object with {data : }:

    app.config(function($httpProvider) {
        $httpProvider.interceptors.push(function() {
            return {
                response: function(res) {
    
                    var old_response = res.businesses,
                        new_response = [];
    
    
                    for (var i = 0; i < old_response.length; i++) {
    
                        var obj = old_response[i],
    
                            new_obj = {
                                restaurant_name: obj.name,
                                phone_number: obj.display_phone,
                                yelp_rating: obj.rating,
                                reservation_url: obj.reservation_url
                            };
    
                        new_response.push(new_obj);
                    }
    
                    return {data : new_response};
                }
            }
        });
    });
    

    Return as {data : new_response}