How to Turn the Query String Into a JavaScript Object

It is fairly common for any front-end web developer to examine the query string. If jQuery has taught us anything, that would be the power of abstraction: create functionality once, and then use that functionality as a tool over and over, as needed.

When working with the query string, it is usually best to grab it once, and then be done with that task. This will prove substantially helpful if you need to refer to the query string more than once in your code. If we do the work once, and do it right, then we have created a nice little tool that we can use over and over throughout our code.

So perhaps the best way to accomplish this task is to turn the query string into a JavaScript object. Simple stuff here. Let’s lay out our plan of attack:

Get a reference to the Query String
Chop off the question mark (we don’t need that)
Turn the key/values into elements of an array
Turn each key/value pair into a little two-element array
Populate our object with each key/value as a propertyName / propertyValue
We’re done!

So okay, let’s get to work.

Example # 1

var queryToObject = function(){
    var
    i = 0,
    retObj = {},
    pair = null,
    sPageURL = window.location.search.substring(1),
    qArr = sPageURL.split('&amp;');

    for (; i &lt; qArr.length; i++){
        pair = qArr[i].split('=');
        retObj[pair[0]] = pair[1];
    };

    return retObj;
};

console.dir( queryToObject() );

var queryToObject = function(){

var

i = 0,

retObj = {},

pair = null,

sPageURL = window.location.search.substring(1),

qArr = sPageURL.split('&');

for (; i < qArr.length; i++){

pair = qArr[i].split('=');

retObj[pair[0]] = pair[1];

};

return retObj;

};

console.dir( queryToObject() );

In Example # 1 we have the raw and basic code needed to accomplish our task. I won’t go into any detail here. I just wanted to illustrate that the actual code needed is fairly minimal. So, if you run this code in your JavaScript console, and you have appended a query string to the page URL, you should see the object we created in the console.

Example # 2

var queryToObject = function(){
    var
    i = 0,
    retObj = {},
    pair = null,
    //get the query string, omitting the "?"
    sPageURL = window.location.search.substring(1),
    //use the ampersand as a separator
    qArr = sPageURL.split('&amp;');

    //each element in qArr is not a key/val pair
    //so we need to turn each one of these pairs
    //into a two-element array
    for (; i &lt; qArr.length; i++){
        //use the "=" as a separator
        pair = qArr[i].split('=');
        //pair is now a two-element array
        //so the "key" is the first element of that array
        //and the "val" is the second element
        //so now we just add this "pair" to our return object
        retObj[pair[0]] = pair[1];
    };

    //return the new object
    return retObj;
};

console.dir( queryToObject() );

var queryToObject = function(){

var

i = 0,

retObj = {},

pair = null,

//get the query string, omitting the "?"

sPageURL = window.location.search.substring(1),

//use the ampersand as a separator

qArr = sPageURL.split('&');

//each element in qArr is not a key/val pair

//so we need to turn each one of these pairs

//into a two-element array

for (; i < qArr.length; i++){

//use the "=" as a separator

pair = qArr[i].split('=');

//pair is now a two-element array

//so the "key" is the first element of that array

//and the "val" is the second element

//so now we just add this "pair" to our return object

retObj[pair[0]] = pair[1];

};

//return the new object

return retObj;

};

console.dir( queryToObject() );

In Example # 2, we expanded out the code with comments to make it easier to follow along. I won’t replicate each comment, but from a high-level perspective, here are the steps we take:

Declare our variables at the top of the function (just good form)
Get a reference to the query string, and chop off the question mark (i.e. omit “?”)
Turn the query string into an array, using “&” as a delimiter
Take that array, and split each element into a sub-array, using “=” as a delimiter
That sub-array will always be a two-element array because on the left of the “=” is a key, and on the right side of it is a value
Turn those two sub-array elements into a new “property / value” pair for our return object
Repeat the last two steps for each sub array that was generated, by splitting the first array at “&”
Now return our new object

Example # 3

//create an object from the query string
var queryObject = queryToObject();

//inject these values into the DOM
for(prop in queryObject){
    if(queryObject.hasOwnProperty(prop)){
        $keyVals.append('&lt;li&gt;&lt;span class="key"&gt;' + prop +  '&lt;/span&gt;&lt;span class="val"&gt;' + queryObject[prop] + '&lt;/span&gt;&lt;/li&gt;');
    };
};

//create an object from the query string

var queryObject = queryToObject();

//inject these values into the DOM

for(prop in queryObject){

if(queryObject.hasOwnProperty(prop)){

$keyVals.append('<li><span class="key">' + prop + '</span><span class="val">' + queryObject[prop] + '</span></li>');

};

In Example # 3, we added functionality that allows us to inject the values of our new object into the DOM. We use a for-in loop to iterate over the properties of our object. For each iteration of that loop, we inject a new LI element, with the appropriate markup for presentation. Note how we are using the variable “prop” and we also make a reference to “queryObject[prop]” which holds the value of the current property over which we are iterating.

Example # 4

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>How to Turn The Query String Into a JavaScript Object</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <!-- style tag removed for brevity -->
    </head> 
    <body> 
	<section id="container">
            <h1>How to Turn The Query String Into a JavaScript Object</h1>
            <h2>Please open your JavaScript console</h2>
            <div>
                <b>Here is the Query String you used:</b>
                <ul id="keyVals"></ul>
            </div>
	</section>

        <script>
            var
            prop = null,
            queryObject = {},
            $keyVals = $('#keyVals'),

            queryToObject = function(){
                var
                i = 0,
                retObj = {},
                pair = null,
                //get the query string, omitting the "?"
                sPageURL = window.location.search.substring(1),
                //use the ampersand as a separator
                qArr = sPageURL.split('&');

                //each element in qArr is not a key/val pair
                //so we need to turn each one of these pairs
                //into a two-element array
                for (; i < qArr.length; i++){
                    //use the "=" as a separator
                    pair = qArr[i].split('=');
                    //pair is now a two-element array
                    //so the "key" is the first element of that array
                    //and the "val" is the second element
                    //so now we just add this "pair" to our return object
                    retObj[pair[0]] = pair[1];
                };

                //return the new object
                return retObj;
            };

            //turn this empty object into one that
            //contains the keys and values from the query string
            queryObject = queryToObject();

            //inspect the object in the console
            if(console && console.dir){console.dir(queryObject)};

            //inject these values into the DOM
            for(prop in queryObject){
                if(queryObject.hasOwnProperty(prop)){
                    $keyVals.append('<li><span class="key">' + prop +  '</span><span class="val">' + queryObject[prop] + '</span></li>');
                };
            };
        </script>
    </body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>How to Turn The Query String Into a JavaScript Object</title>

</head>

<body>

<h1>How to Turn The Query String Into a JavaScript Object</h1>

<h2>Please open your JavaScript console</h2>

<div>

<b>Here is the Query String you used:</b>

</div>

</section>

var

prop = null,

queryObject = {},

$keyVals = $('#keyVals'),

queryToObject = function(){

var

i = 0,

retObj = {},

pair = null,

//get the query string, omitting the "?"

sPageURL = window.location.search.substring(1),

//use the ampersand as a separator

qArr = sPageURL.split('&');

//each element in qArr is not a key/val pair

//so we need to turn each one of these pairs

//into a two-element array

for (; i < qArr.length; i++){

//use the "=" as a separator

pair = qArr[i].split('=');

//pair is now a two-element array

//so the "key" is the first element of that array

//and the "val" is the second element

//so now we just add this "pair" to our return object

retObj[pair[0]] = pair[1];

};

//return the new object

return retObj;

};

//turn this empty object into one that

//contains the keys and values from the query string

queryObject = queryToObject();

//inspect the object in the console

if(console && console.dir){console.dir(queryObject)};

//inject these values into the DOM

for(prop in queryObject){

if(queryObject.hasOwnProperty(prop)){

$keyVals.append('<li><span class="key">' + prop + '</span><span class="val">' + queryObject[prop] + '</span></li>');

};

</script>

</body>

</html>

In Example # 4, we have the full source code for our completed working example.

Here is the link to our full working example: http://examples.kevinchisholm.com/javascript/query-string/to-object/?fname=alfred&lname=newman&acctNum=010203&salesRegion=EastCoast&company=MadMagazine

Summary

In this article, we took at look at one way in which you can turn the query string into a JavaScript object. We learned how to get a reference to the query string, omit the question mark, turn the key/value pairs into an array, and then work with each element of that array to turn them into properties of our new object. We also learned how to inspect our new object and inject it into the DOM as markup.

Helpful Links for working with the Query String using JavaScript

http://en.wikipedia.org/wiki/Query_string
http://joncom.be/code/javascript-querystring-values/
http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values
http://stackoverflow.com/questions/647259/javascript-query-string