Is it possible to specify parameter order with Ang

Question

In my Angular app, I have a service that utilizes $http to retrieve data from a server. The server endpoint uses HMAC authentication and expects the query string parameters to be in a specific order on the URL.

Angular sorts the $http parameters when it builds the URL, so it doesn't seem possible to specify a custom parameter order.

Here's an example:

this.apiCall = function() {
    return $http({
        method: 'GET',
        url: 'http://example.com/url/v1/endpoint',
        params: {
            'c': 'cdata',
            'a': 'adata',
            'b': 'bdata'
        }
    });
};

Angular will build the URL as http://example.com/url/v1/endpoint?a=adata&b=bdata&c=cdata, but I need to preserve the order of the params as specified, http://example.com/url/v1/endpoint?c=cdata&a=adata&b=bdata.

I realize I could just tack on the parameters to the URL string manually, but that is not very friendly and it doesn't allow for easy management in $http interceptors.

Angular probably sorts the parameters to keep a uniform behavior across browser implementations, as object ordering is not specified in ECMAScript.

Regardless, does anyone know how to work around the default Angular behavior of sorting the params in order to build a URL that preserves the parameters as specified?

Answer 1

I ended up creating a rudimentary interceptor to keep the "as-specified" params order. This interceptor runs if the keepParamsOrder configuration variable is set on the $http call.

In your module config:

$httpProvider.interceptors.push(function() {
    return {
        'request': function(config) {
            if (!config.keepParamsOrder || !config.params) {
                return config;
            }

            var queryStrings = [];
            for (var key in config.params) {
                if (config.params.hasOwnProperty(key)) {
                    queryStrings.push(key + '=' + config.params[key]);
                }
            }

            // Reset the params to be empty
            config.params = {};

            config.url += (config.url.indexOf('?') === -1) ? '?' : '&';
            config.url += queryStrings.join('&');

            return config;
        },
    };
});

Tell it to run in the service call config:

this.apiCall = function() {
    return $http({
        method: 'GET',
        url: 'http://example.com/url/v1/endpoint',
        params: {
            'c': 'cdata',
            'a': 'adata',
            'b': 'bdata'
        },
        keepParamsOrder: true
    });
};

Answer 2

I improved upon your solution to create something more stream-lined and guaranteed to work:

$httpProvider.interceptors.push(function() {
    return {
        request: function (config) {
            if (!config.paramOrder) {
                return config;
            }

            // avoid leaking config modifications
            config = angular.copy(config, {});

            var orderedParams = [];
            config.paramOrder.forEach(function (key) {
                if (config.params.hasOwnProperty(key)) {
                    orderedParams.push(encodeURIComponent(key) + '=' + encodeURIComponent(config.params[key]));
                    // leave only the unordered params in the `params` config
                    delete config.params[key];
                }
            });

            config.url += (config.url.indexOf('?') === -1) ? '?' : '&';
            config.url += orderedParams.join('&');

            return config;
        },
    };
});

Invoke with the following:

$http({
    method: 'GET',
    url: 'http://example.com/url/v1/endpoint',
    params: {
        a: 'aValue',
        b: 'bValue',
        c: 'cValue'
    },
    paramOrder: ['c', 'a']
});

to get a query string starting with key c followed by a. The params not mentioned in paramOrder will be appended after the ordered params (in alphabetical order).