Jquery param parameter for javascript

Question

I need to convert the following type of dictionary:

{'key1': ['value1'], 'key2': ['value1', 'value2']} 

to key1=value1&key2=....

i.e. mail data form. I do this inside chrome extention, the above formdata dictionary is returned:

 chrome.webRequest.onBeforeRequest.addListener(function(details) { if(details.method=="POST") // ajax call { message.postdata = details.requestBody.formData; } return {requestHeaders: details.requestHeaders}; }, {urls: ["<all_urls>"],types: ["main_frame", "sub_frame"]}, ["blocking", "requestBody"]); 

I remember the same thing using the jQuery $ .params () function. How can this be done in javascript.

Answer 1

 function queryParams(source) { var array = []; for(var key in source) { array.push(encodeURIComponent(key) + "=" + encodeURIComponent(source[key])); } return array.join("&"); } 

Answer 2

This is the mini jquery param [fiddle] API .

You can use it through jqMini.param(obj);

as shown in the script above, it provides the same output with jquery the original function $ .param.

Note: jqMini.param does not handle traditional jquery objects as parameters.

 (function(w) { var app = {}, class2type = {}, toString = class2type.toString, r20 = /%20/g, rbracket = /\[\]$/; w.jqMini = app; app.type = function(obj) { if ( obj == null ) { return obj + ""; } // Support: Android < 4.0, iOS < 6 (functionish RegExp) return typeof obj === "object" || typeof obj === "function" ? class2type[ toString.call(obj) ] || "object" : typeof obj; }; app.isFunction = function(obj) { return app.type(obj) === "function"; }; app.buildParams = function(prefix, obj, add) { var name, key, value; if(Array.isArray(obj)) { for(var key in obj) { value = obj[key] if(rbracket.test(prefix)) add(prefix, value); else app.buildParams(prefix + "[" + (typeof value === "object"? key: "") + "]", value, add ); } } else if(app.type(obj) === 'object') { for(name in obj) app.buildParams(prefix + "[" + name + "]", obj[name], add); } else add(prefix, obj); }; app.param = function(obj) { var prefix, key, value serialized = [], add = function(key, value) { value = app.isFunction(value)? value() : (value == null ? "" : value ); serialized[serialized.length] = encodeURIComponent(key) + "=" + encodeURIComponent(value); }; if(Array.isArray(obj)) { for(key in obj) { value = obj[key]; add(key, value); } } else { for(prefix in obj) app.buildParams(prefix, obj[prefix], add); } return serialized.join('&').replace(r20, '+'); }; })(window); var obj = {'key1': ['value1'], 'key2': ['value1', 'value2']}; console.log(jqMini.param(obj)); 

Answer 3

For those of you using AngularJS, you can check out $ httpParamSerializerJQLike

Answer 4

This is what I came up with - it has the same array processing as the jQuery parameter.

 var queryParam = function( ary ) { return Object.keys( ary ).map( function( key ) { if ( Array.isArray( ary[key] ) ) { var arrayParts = []; for ( var i = 0; i< ary[key].length; i++ ) { arrayParts.push( encodeURIComponent( key + '[]' ) + '=' + encodeURIComponent( ary[key][i] ) ); } return arrayParts.join( '&' ); } return encodeURIComponent( key ) + '=' + encodeURIComponent( ary[key] ); }).join('&'); };