Custom Angular $http Serializer

Question

How can I create a custom $http params serializer. For example, assuming im making the following call:

$http({
            url: settings.API_PRODUCTS,
            method: 'GET',
            params: data,
            paramSerializer: '$httpParamSerializerJQLike'
        });

How can I create a new custom serializer so that I would be able to use it like this:

$http({
            url: settings.API_PRODUCTS,
            method: 'GET',
            params: data,
            paramSerializer: '$httpParamCustomSerializer'
        });

I checked how the httpParamSerializerJQLike function is written, but im not sure how to inject and be able to use like above.

Yehia A.Salam · Accepted Answer · 2016-07-29 20:14:21Z

This should do it, create a custom provider

angular.module('yourmodule.providers').provider('$httpCustomParamSerializer', function $httpCustomParamSerializer() {

  this.$get = function() {
    return function jQueryLikeParamSerializer(params) {
      if (!params) return '';
      var parts = [];
      serialize(params, '', true);
      return parts.join('&');

    function forEachSorted(obj, iterator, context) {
        var keys = Object.keys(obj).sort();
        for (var i = 0; i < keys.length; i++) {
            iterator.call(context, obj[keys[i]], keys[i]);
        }
        return keys;
    }

    function encodeUriQuery(val, pctEncodeSpaces) {
        return encodeURIComponent(val).
                replace(/%40/gi, '@').
                replace(/%3A/gi, ':').
                replace(/%24/g, '$').
                replace(/%2C/gi, ',').
                replace(/%3B/gi, ';').
                replace(/%20/g, (pctEncodeSpaces ? '%20' : '+'));
    }

    function serializeValue(v) {
    if (angular.isObject(v)) {
        return angular.isDate(v) ? v.toISOString() : angular.toJson(v);
    }
    return v;
    }   

      function serialize(toSerialize, prefix, topLevel) {
        if (toSerialize === null || angular.isUndefined(toSerialize)) return;
        if (angular.isArray(toSerialize)) {
          angular.forEach(toSerialize, function(value, index) {
            serialize(value, prefix + '[' + (angular.isObject(value) ? index : '') + ']');
          });
        } else if (angular.isObject(toSerialize) && !angular.isDate(toSerialize)) {
          forEachSorted(toSerialize, function(value, key) {
            serialize(value, prefix +
                (topLevel ? '' : '[') +
                key +
                (topLevel ? '' : ']'));
          });
        } else {
          parts.push(encodeUriQuery(prefix) + '=' + encodeUriQuery(serializeValue(toSerialize)));
        }
      }
    };
  }

});

Harris · Accepted Answer · 2016-07-29 20:04:13Z

1

According to the documentation, you can either provide an inline function to the paramSerializer property, or you can create a function service and reference that by name with a string.

answered Jul 29, 2016 at 20:04

Harris

1,78516 silver badges19 bronze badges

Collectives™ on Stack Overflow

Custom Angular $http Serializer

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related