How to write a getHttpParameterMap function

JavaScript polyfill, by , Friday, April 4th, 2014

As the very first thing, I would like to underline that this is a simplification of getting the HTTP Parameter Map, but one that will suffice for many cases. Maybe you can use this as a start to something more specialized for your specific purpose, or maybe this will simply do. Luckily in JavaScript, writing a getHttpParameterMap is pretty easy, all you really need to do is to tidy up the information you can get directly from the browser, into what ever format is convenient for you to use, so lets have a look.

I will present one example of a getHttpParameterMap function, which returns an object that is a map of the HTTP parameters and their respective values. Then I will explain how it works. The code for the function looks like this;

  1. var getHttpParameterMap = function () {
  2. "use strict";
  3. var locationSearch = document.location.search,
  4. paramArr = locationSearch.replace('?','').split('&'),
  5. httpParamMap = {};
  6. paramArr.forEach(function (val) {
  7. var valArr = val.split('=');
  8. httpParamMap[valArr[0]] = valArr[1];
  9. });
  10. return httpParamMap;
  11. };

So we declare and initialize the getHttpParameterMap function at line 1, and then we set it to run in strict mode.

  1. var getHttpParameterMap = function () {
  2. "use strict";

Now in line 3, we initialize the locationSearch variable to be equal to the document.location.search value.

  1. var locationSearch = document.location.search,

This is the search property of the Location object returned by calling document.location. To better understand what this means, here is an example of an Location object returned from this URL; http://www.example.com/index.php?mango=nice&durian=amazing&sun=loveIt#q=happy;

Location {
    ...
    hash: "#q=happy"
    host: "www.example.com"
    hostname: "www.example.com"
    href: "http://www.example.com/index.php?mango=nice&durian=amazing&sun=loveIt#q=happy"
    origin: "http://www.example.com"
    pathname: "/index.php"
    port: ""
    protocol: "http:"
    ...
    search: "?mango=nice&durian=amazing&sun=loveIt"
    ....
}

(The dots represent left out information. If you actually write this in your browser, you will get some methods of the Location object, which I have not shown here) As you can see, the Location object contains lots of information about the document location, but we are interested in the HTTP parameters, and they are nicely stored in the search property.

We then at line 4 remove the leading question mark, and split the string at the ampersands, such that we now have an array consisting of the parameter value pairs stored in paramArr.

  1. paramArr = locationSearch.replace('?','').split('&'),

Using the example URL from before; what will now be stored in paramArr is; ["mango=nice", "durian=amazing", "sun=loveIt"]. At line 5 we create the empty object httpParamMap, which is going to hold the mapping of the parameters and their respective values.

  1. httpParamMap = {};

From line 7 - 10 we iterate over the paramArr array using the forEach method. Note; that this will not work older version of IE, such as IE8 unless you use a polyfill. If you such a polyfill, you can find one in my Array.prototype.forEach article. There you can also find information about the parameters available to the callback function of the method. In this case, I use only the first parameter, which is the value of the current element in the iteration.

  1. paramArr.forEach(function (val) {
  2. var valArr = val.split('=');
  3. httpParamMap[valArr[0]] = valArr[1];
  4. });

At line 8, we split the current value, for example "mango=nice", at the equal character, such that the valArr now is an array of two elements like ["mango", "nice"].

  1. var valArr = val.split('=');

At line 9, we add the first element in the valArr as a property of the httpParamMap object, and set its value to be equal to the second element in valArr.

  1. httpParamMap[valArr[0]] = valArr[1];

Finally at line 12 we return the httpParamMap object.

  1. return httpParamMap;

The object that we would get returned, if we use our example URL from before, would look like this;

{
    "mango" : "nice",
    "durian" : "amazing",
    "sun" : "loveIt"
}

As I started out saying, this function is quite simplified, and there might be cases where this functionality simply does not suffice. Also there might be those who prefer using RegExp instead of split, but for this simple task, I personally see no reason to do that.