Jquery param alternative for javascript

Question

I need to convert following type dictionary:

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

to key1=value1&key2=....

i.e. post data form. I am doing this inside chrome extention, the above dictionary of formdata is returned by:

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 remeber achieving the same using JQuery $.params() function. How can the same be done in javascript.

ryeballar · Accepted Answer · 2019-06-03 23:18:13Z

12

This is a mini jquery param API [fiddle].

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

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

Note: jqMini.param does not handle the 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));

edited Jun 3, 2019 at 23:18

answered Mar 22, 2014 at 20:43

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rodrigo Over a year ago

Dude you should create a Gist with this code. Honestly it's being quite unused in this answer. I needed an alternative to $.param() for data obtained from a form by Angular JS and using jquery just for that was killing me. Thanks a lot!! +1

jonperl Over a year ago

i is undefined in app.buildParams(prefix + "[" + (typeof v === "object"? i: "") + "]", value, add );

tylerjgarland Over a year ago

Can anyone explain what v and i are in this line ` app.buildParams(prefix + "[" + (typeof v === "object"? i: "") + "]", value, add );`

serdar.sanri Over a year ago

I am really curious where did you get v and i here ` app.buildParams(prefix + "[" + (typeof v === "object"? i: "") + "]", value, add );`

ryeballar Over a year ago

The v and i are the value and key variables. I've created this fiddle 5 years ago, and I guess I messed up when I was testing it.

Joey · Accepted Answer · 2014-03-22 20:22:11Z

10

function queryParams(source) {
  var array = [];

  for(var key in source) {
     array.push(encodeURIComponent(key) + "=" + encodeURIComponent(source[key]));
  }

  return array.join("&");
}

answered Mar 22, 2014 at 20:22

Joey

4775 silver badges10 bronze badges

1 Comment

josephnvu Over a year ago

This doesn't work for nested objects. The answer below by @ryeballar figured it out

daniel.caspers · Accepted Answer · 2016-04-08 22:16:38Z

2

For those of you using AngularJS, you might want to check out $httpParamSerializerJQLike

answered Apr 8, 2016 at 22:16

daniel.caspers

1,7561 gold badge19 silver badges25 bronze badges

Comments

Daniel Walmsley · Accepted Answer · 2017-11-18 22:20:26Z

1

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

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('&');
};

answered Nov 18, 2017 at 22:20

Daniel Walmsley

813 bronze badges

Comments

Денис Смаль · Accepted Answer · 2020-01-23 18:28:36Z

0

Try this:

const data = {'key1': ['value1'], 'key2': ['value1', 'value2']};

const p = new URLSearchParams();
Object.keys(data).map((k) => data[k].map((v) => p.append(k+"[]",v)));

console.log(p.toString());

Output: key1%5B%5D=value1&key2%5B%5D=value1&key2%5B%5D=value2

answered Jan 23, 2020 at 18:28

Денис Смаль

1147 bronze badges

Collectives™ on Stack Overflow

Jquery param alternative for javascript

5 Answers 5

5 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related