Node.js – Passing Arrays in the Querystring

One of the enticing attributes of Node.js development is the high level of flexibility offered by the language.  Whereas other web application frameworks often have more stringent and developed patterns for development tasks, Node is more of a Wild West, where the recommended implementation can be anyone’s game.  One of those open-ended tasks is passing arrays through the Querystring.

First, a little background information on the Querystring and URL structure.  Each URL on the web can have an optional component at the end, called the Querystring.  The Querystring passes parameters to the page, and can be a useful way to send static arguments to a web page.  The Querystring is composed of key-value pairs, as follows:

http://www.apharmony.com/?name=Andrew&color=blue

In this example, the Querystring consists of everything after the question mark.  The two keys are “name” and “color”, and their values are listed after the = sign.

The actual format of the Querystring is a matter of agreement between the web browsers and the web servers.  Arrays are one of the fringe features that are often handled differently based on the web server and browser.  While earlier versions of Node could encode arrays in the Querystring, the feature was removed, presumably due to complexities in real-world implementation.

The standard format for adding arrays to the Querystring is as follows:

http://www.apharmony.com?name=Andrew&colors[]=blue&colors[]=green

The problem with the above format is that associative arrays and objects do not translate well into the syntax.  The most effective, all-around solution is to encode the object or array into a JSON string, and then add that to the Querystring:

var querystring = require('querystring');
var grades = { 'Jackie Davidson': 'A', 'Emil Erhardt': 'A-', 'Steve McKnight': 'C' };
var xurl = "http://www.apharmony.com?"+querystring.stringify({'grades':JSON.stringify(grades)});

In the example above, an associative array is encoded to the Querystring.  The JSON.stringify function is used to take any object and convert it to a string representation.  Afterwards, querystring.stringify parses the string and properly escapes any special characters for the URL. The resulting Querystring is then appended to the URL, and is ready to be displayed in the response HTML.

Finally, on the receiving side, the web application will need to convert the input Querystring into an object.  This is a simple one-line operation in Node.js / Express:

var grades = JSON.parse(req.query['grades']);

Written by Andrew Palczewski

About the Author
Andrew Palczewski is CEO of apHarmony, a Chicago software development company. He holds a Master's degree in Computer Engineering from the University of Illinois at Urbana-Champaign and has over ten years' experience in managing development of software projects.
Google+