{"id":789,"date":"2014-03-08T22:27:42","date_gmt":"2014-03-08T22:27:42","guid":{"rendered":"http:\/\/tech.avant.net\/q\/?p=789"},"modified":"2019-06-01T04:33:48","modified_gmt":"2019-06-01T04:33:48","slug":"javascript-appending-to-query-string","status":"publish","type":"post","link":"https:\/\/tech.avant.net\/q\/javascript-appending-to-query-string\/","title":{"rendered":"javascript appending to query string"},"content":{"rendered":"

I would like to append an associative array to a URL’s query string. For whatever reason, there is no native javascript method to accomplish this task. This needs to be done manually or using a common web framework such as jQuery.<\/p>\n

The first step is to serialize the associative array into a query string,<\/p>\n

native javascript<\/h2>\n

With plain-old-javascript, you can do something like this,<\/p>\n

var queryVars = {'foo':'bar', 'spam':'eggs', 'tracker':'yes' };\n\nvar queryStringParts = new Array();\nfor(var key in queryVars) {\n  queryStringParts.push(key + '=' + queryVars[key]);\n}\nvar queryString = queryStringParts.join('&');\n<\/pre>\n
The value of queryString<\/span> will be<\/p>\n
foo=bar&spam=eggs&tracker=yes<\/pre>\n
jQuery<\/h2>\n
Since version 1.2 jQuery has supported the jQuery.param()<\/a> function to serialize any array or object into a URL query string. The above example becomes,<\/p>\n
var queryVars = {'foo':'bar', 'spam':'eggs', 'tracker':'yes' };\n\nvar queryString = jQuery.param(queryVars);\n<\/pre>\n
node.js<\/h2>\n
My favorite approach is the node.js querystring.stringify()<\/a> function, I like this as it is easiest to remember,<\/p>\n
var queryVars = {'foo':'bar', 'spam':'eggs', 'tracker':'yes' };\n\nvar queryString = querystring.stringify(queryVars);\n<\/pre>\n
Appending ? or &<\/h2>\n
In most cases you don’t want to assume an input url does not already contain a query string, in fact, this would be a rather bad assumption. To get this to work you’ll want to append your new query string to any existing query string using the & character, otherwise use the ? character. Here is an example,<\/p>\n
function appendQueryString(url, queryVars) {\n    var firstSeperator = (url.indexOf('?')==-1 ? '?' : '&');\n    var queryStringParts = new Array();\n    for(var key in queryVars) {\n        queryStringParts.push(key + '=' + queryVars[key]);\n    }\n    var queryString = queryStringParts.join('&');\n    return url + firstSeperator + queryString;\n}\n\nvar url = \"something.html?q=test\";\nvar queryVars = {'foo':'bar', 'spam':'eggs', 'tracker':'yes' };\n\nvar new_url = appendQueryString(url, queryVars);\n<\/pre>\n
The value of new_url<\/span> will be<\/p>\n
something.html?q=test&foo=bar&spam=eggs&tracker=yes<\/pre>\n
\n
<\/div>\n