What is the difference between $httpParamSerializerJQLike and encodeURIComponent

Question

Can someone explain the difference between $httpParamSerializerJQLike, available in Angular, and encodeURIComponent?

Do we need to execute JSON.Stringify() after serializing the params with $httpParamSerializerJQLike? My understanding is that $httpParamSerializerJQLike is Angular's version of encodeURIComponent and that it executes JSON.Stringify internally (of this part I'm not sure).

Answer 1

$httpParamSerializerJQLike is not Angular's version of encodeURIComponent.

From the documentation for $httpParamSerializerJQLike:

Alternative $http params serializer that follows jQuery's param() method logic.

$httpParamSerializerJQLike is used to create a serialized representation of an Array or plain object suitable for use in a URL query string or Ajax request. It is used to define query parameters for URIs. Its use is limited to arrays and plain objects.

For example:

$httpParamSerializerJQLike({a: 'two'}); // "a=two"
$httpParamSerializerJQLike('abc'); // "0=a&1=b&2=c"

You'll notice that the string 'abc' is treated like an array of characters.

encodeURIComponent:

encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character.

For example:

encodeURIComponent({a: 'two'}); // "%5Bobject%20Object%5D"
encodeURIComponent('abc'); // "abc"
encodeURIComponent('abc abc abc'); // "abc%20abc%20abc"

You can see that encodeURIComponent replaces special characters with the appropriate escape sequences and does not treat a string like a sequence of characters.