How can I insert commands before or prevent $http's JSONP automatic parsing in AngularJS?

Question

It seems like pretty much every question or explanation I find regarding $http or angularjs in general assumes you can modify the response from your requests. I can't do that and the response I'm getting is malformed (according to the AngularJS parser). It's malformed in a consistent way so I could modify the plain text to fix the problem before parsing it, but both response interceptors and transform response functions occur after the default (content type based?) parsing.

Edit: The issue is with the fact that I need to use the JSONP methodology to make a request for information from another site, but the data does not have the expected JSONP callback so something (I'm still not sure if its the browser based on the content or the AngularJS code) throws a syntax error.

New question: Does anyone know a way around this?

Answer 1

This has been tested and does work. Let me know if you have any further questions. http://jsfiddle.net/moderndegree/Kn3Tc/

HTML

<div ng-app="myApp">
    <div ng-controller="myController">
        {{results.tada}}
    </div>
</div>

Javascript

angular.module('myApp', ['ngResource']).
factory('myService', function($http, $resource, $log){
    return $resource('/', {}, {
        get: {
            method: 'GET',
            // placed custom transform ahead of $http default
            transformRequest: [function(data, headersGetter){
                $log.info(data);
                $log.info(headersGetter());
            }].concat($http.defaults.transformRequest),
            // placed custom transform ahead of $http default
            transformResponse: [function (data, headersGetter) {
                $log.info(data);
                $log.info(headersGetter());
                data = {tada:"Check your console"};
                return data;
            }].concat($http.defaults.transformResponse)
        }
    });
}).
controller('myController', function(myService, $scope) {
    $scope.results = myService.get();
});

Update To use JSONP, just switch the method to JSONP. You can read more about ngResource here.

Answer 2

Here is what the angular documentation says

To globally augment or override the default transforms, modify the $httpProvider.defaults.transformRequest and $httpProvider.defaults.transformResponse properties. These properties are by default an array of transform functions, which allows you to push or unshift a new transformation function into the transformation chain. You can also decide to completely override any default transformations by assigning your transformation functions to these properties directly without the array wrapper.

Basically what you would need to do is to configure the $httpProvider

angular.module('myApp', [])
    .config(['$httpProvider', function ($httpProvider) {
//Define your transform function
//push your trasform function to the start of the array  $httpProvider.defaults.transformResponse
//Or replace the transformResponse array with a function or a new array of tranform functions.

}]);

Now the trasform function that you implement should be first function in the array. Since there is already a string to JSON transform function there.