Screen the $http request information prior to transmission

Question

Screen the $http request information prior to transmission

Angular has a built-in feature that removes properties with a prefix of $$ from request data or params objects.

I want to filter out my own UI-specific properties that I don't want to send to the server, but I don't want to rely on using $$.

Is there a way to access Angular's $$ filter method publicly to filter objects with a different prefix?

Where would be the most appropriate place to implement this method? Should I use a Transform or an Interceptor?

For example, consider the following data object:

var payload = {
    id: 12345,   
    name: 'Bob',
    _editing: true
};

When sending this object to the server like this:

$http({
    method: 'POST',
    url: '/save',
    data: payload
});

How can I remove the _editing property before the request is sent?

EDIT: Or any property starting with _

This filter should apply to all requests and should be able to handle deep, complex objects.

I am using Angular v1.3.18

Thank you!

javascript angularjs angularjs-http

Answer 1

Answer №1

Of course, you can utilize the $httpProvider.interceptors method for your purpose. For stripping out specific parts, a neat solution involves leveraging the functionalities of lodash:

var obj = {_f: 1, _b: 2, a: 1, b: 2 }

_.omit(obj, function (value, key) { 
  return key.indexOf('_') === 0; 
});

This code snippet will yield {a: 1, b: 2}.

On the other hand, if you prefer not to rely on an external library and stick to Angular's built-in utility functions, you can opt for:

angular.forEach(obj, function (value, key) { 
  if (key.indexOf('_') === 0) { 
    delete obj[key] 
  }
});

Answer 2

Of course, you can utilize the $httpProvider.interceptors method for your purpose. For stripping out specific parts, a neat solution involves leveraging the functionalities of lodash:

var obj = {_f: 1, _b: 2, a: 1, b: 2 }

_.omit(obj, function (value, key) { 
  return key.indexOf('_') === 0; 
});

This code snippet will yield {a: 1, b: 2}.

On the other hand, if you prefer not to rely on an external library and stick to Angular's built-in utility functions, you can opt for:

angular.forEach(obj, function (value, key) { 
  if (key.indexOf('_') === 0) { 
    delete obj[key] 
  }
});

Answer 3

Answer №2

If you're looking for a solution, I suggest utilizing an http Interceptor.

All you need to do is add this line to your app.js configuration:

.config(function ($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
})

Next, create a factory like this:

.factory('httpInterceptor', ['$q', '$rootScope', '$filter', function ($q, $rootScope, $filter) {
    var canceller = $q.defer();
    //define some variables here
    return {

        request: function (config) {

            //Implement your modifications here
            //For example, adjust the header
            config.headers.someHeader = something;
            //Set a timeout if necessary
            config.timeout = 20000;

            return config || $q.when(config)
        },

        response: function (response) {

            //Handle the response if needed           
            return response || $q.when(response);
        },

        responseError: function (response) {

            //Handle any errors here
            return $q.reject(response);
        }
    };
}])

You now have the ability to manipulate the config object by adding or removing properties from the header or sent parameters, set timeouts, or access the response for broadcasting according to your requirements.

I trust this information proves useful.

Answer 4

If you're looking for a solution, I suggest utilizing an http Interceptor.

All you need to do is add this line to your app.js configuration:

.config(function ($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
})

Next, create a factory like this:

.factory('httpInterceptor', ['$q', '$rootScope', '$filter', function ($q, $rootScope, $filter) {
    var canceller = $q.defer();
    //define some variables here
    return {

        request: function (config) {

            //Implement your modifications here
            //For example, adjust the header
            config.headers.someHeader = something;
            //Set a timeout if necessary
            config.timeout = 20000;

            return config || $q.when(config)
        },

        response: function (response) {

            //Handle the response if needed           
            return response || $q.when(response);
        },

        responseError: function (response) {

            //Handle any errors here
            return $q.reject(response);
        }
    };
}])

You now have the ability to manipulate the config object by adding or removing properties from the header or sent parameters, set timeouts, or access the response for broadcasting according to your requirements.

I trust this information proves useful.

Answer 5

Answer №3

Before making the POST request, it is important to remove certain properties from the payload. You can easily achieve this by using the delete method.

var payload = {
    id: 54321,
    email: 'test@example.com',
    _active: true
};

delete payload._active

$http({
    method: 'POST',
    url: '/submit',
    data: payload
});

Answer 6

Before making the POST request, it is important to remove certain properties from the payload. You can easily achieve this by using the delete method.

var payload = {
    id: 54321,
    email: 'test@example.com',
    _active: true
};

delete payload._active

$http({
    method: 'POST',
    url: '/submit',
    data: payload
});

Answer 7

Answer №4

Utilizing interceptors in your code can help you customize your requests and responses. As the name implies, interceptors are meant to intercept HTTP requests or responses. Quoting from the Angular documentation:

For various purposes like global error handling, authentication, or any form of pre-processing of requests or post-processing of responses, it is useful to have the ability to intercept requests before they reach the server and responses before they are delivered to the requesting code.

var app = angular.module('myApp', []);

app.config(['$httpProvider', function($httpProvider) {  
    $httpProvider.interceptors.push('myInterceptor');
}]);

app.factory('myInterceptor', ['$q', function($q) {  

    var myInterceptor = {
        request: function(config) {
            delete config.data._editing;

            return config;
        }   
    };

    return myInterceptor;
}]);

app.controller('myController', ['$http', function($http) {
    var payload = {
        id: 12345,   
        name: 'Bob',
        _editing: true
    };

    $http({
        method: 'POST',
        url: '/echo/json/',
        data: payload
    });
}]);

If you want to see this in action, I've set up a functional jsfiddle. The fiddle makes an AJAX request, so make sure to check the network tab to view the request payload.

Answer 8

Utilizing interceptors in your code can help you customize your requests and responses. As the name implies, interceptors are meant to intercept HTTP requests or responses. Quoting from the Angular documentation:

For various purposes like global error handling, authentication, or any form of pre-processing of requests or post-processing of responses, it is useful to have the ability to intercept requests before they reach the server and responses before they are delivered to the requesting code.

var app = angular.module('myApp', []);

app.config(['$httpProvider', function($httpProvider) {  
    $httpProvider.interceptors.push('myInterceptor');
}]);

app.factory('myInterceptor', ['$q', function($q) {  

    var myInterceptor = {
        request: function(config) {
            delete config.data._editing;

            return config;
        }   
    };

    return myInterceptor;
}]);

app.controller('myController', ['$http', function($http) {
    var payload = {
        id: 12345,   
        name: 'Bob',
        _editing: true
    };

    $http({
        method: 'POST',
        url: '/echo/json/',
        data: payload
    });
}]);

If you want to see this in action, I've set up a functional jsfiddle. The fiddle makes an AJAX request, so make sure to check the network tab to view the request payload.

Screen the $http request information prior to transmission

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can we utilize a loop to continuously sum up numbers until we reach a multiple of another number, let's say when the total is divisible by 4?

Tips for creating a tabbed form that easily glides between tabs

Changing the close button icon in highslide popups

Aligning an object in ThreeJS to always face the camera, ensuring it is perfectly straight and flat

What steps can be taken to safeguard the title of the document in the top window from being altered by any iframe or script?

The useEffect hook in my React app causes the homepage to refresh

Having trouble getting my list items to display on individual lines within the foreach loop. It just doesn't seem to be working as expected

React Typescript: Unable to set component as element

Why is the location search not staying centered after resizing the map on Google Maps?

What are the steps to implement character movement in a 2D game using JavaScript?

What are the best ways to optimize and capitalize on functionality in Electron.js?

It appears that the jQuery.post() method is being overlooked or bypassed for unknown reasons

Utilizing React with an alternative server-side language

The Appsheet algorithm determined the exact expiration date as 2 days from the specified date

Maximizing JavaScript DOM efficiency

Attempting to implement a smooth fade effect on my image carousel using React-Native

What is the best way to update a deeply nested array of objects?

Verify the identity of all REST API requests without the need for a username or password in order to obtain a

Error 16 occurred when attempting to ngUpgrade two different versions of Highcharts

The image fails to appear while creating a PDF in AngularJS using pdfmake