Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Convert JavaScript object to x-www-form-urlencoded format
function JSON_to_URLEncoded(element,key,list){
var list = list || [];
if(typeof(element)=='object'){
for (var idx in element)
JSON_to_URLEncoded(element[idx],key?key+'['+idx+']':idx,list);
} else {
list.push(key+'='+encodeURIComponent(element));
}
return list.join('&');
}
var data = {
'users' : [
{
"id": 100,
"name": "Stefano"
},
{
"id": 200,
"name": "Lucia"
},
{
"id": 300,
"name": "Franco"
},
],
'time' : +new Date
};
console.log(
JSON_to_URLEncoded(data)
);
/*
Output:
users[0][id]=100&users[0][name]=Stefano&users[1][id]=200&users[1][name]=Lucia&users[2][id]=300&users[2][name]=Franco&time=1405014230183
*/
@smtchahal

This comment has been minimized.

Copy link

smtchahal commented Jul 11, 2018

One liner using ES2015 (if you don't care about nesting or arrays):

const toUrlEncoded = obj => Object.keys(obj).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(obj[k])).join('&');

toUrlEncoded({hello: 'world', message: "JavaScript is cool"});
// => "hello=world&message=JavaScript%20is%20cool"
@mdere-unbound

This comment has been minimized.

Copy link

mdere-unbound commented Mar 8, 2019

I have an issue when the object is further nested than your example for when a key has a value of null. What is the best way to make sure to ensure null value is included the key/value param?

@GiraffeSummer

This comment has been minimized.

Copy link

GiraffeSummer commented May 24, 2019

Thanks a ton, this really saved me!

@amiratak88

This comment has been minimized.

Copy link

amiratak88 commented Jun 6, 2019

This is great, Thanks a lot!

@Booligoosh

This comment has been minimized.

Copy link

Booligoosh commented Oct 9, 2019

Thanks for this!!! 🙏

@ntohidi

This comment has been minimized.

Copy link

ntohidi commented Oct 11, 2019

Thanks a lot, this saved my day!

@clshortfuse

This comment has been minimized.

Copy link

clshortfuse commented Oct 22, 2019

Slightly faster with Object.entries() than Object.keys() because you get both the value back as well per iteration.

/**
 * @param {Object} object
 * @return {string}
 */
export function toFormUrlEncoded(object) {
  return Object.entries(object)
    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
    .join('&');
}
@bitterloa

This comment has been minimized.

Copy link

bitterloa commented Mar 15, 2020

@clshortfuse I used your code successfully to create the params string necessary to properly send data to Rails using the Rails.ajax() javascript library.

@ezra40b

This comment has been minimized.

Copy link

ezra40b commented Apr 18, 2020

This is amazing! Thanks so much!

@CXVVMVII

This comment has been minimized.

Copy link

CXVVMVII commented Jul 3, 2020

Saved my day , Thanks a lot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.