Convert JavaScript object to x-www-form-urlencoded format

JSON_to_URLEncoded.js

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

JSON_to_URLEncoded_TEST.js

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

*/

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"

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?

Thanks a ton, this really saved me!

This is great, Thanks a lot!

Thanks for this!!! 🙏

Thanks a lot, this saved my day!

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

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

This is amazing! Thanks so much!

Saved my day , Thanks a lot ♥

That's great, thanks. Based on your version, I wrote one in python which encodes the keys as well and with optional arguments to select safe characters (which should not be encoded).

Saved my life, thank you!! <3

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

Does not produce the same output when:

x = {a: 1, b: { c: 3, d: "asdf & hahaha" }}

JSON_to_URLEncoded(x)
// "a=1&b[c]=3&b[d]=asdf%20%26%20hahaha"

toFormUrlEncoded(x)
// "a=1&b=%5Bobject%20Object%5D"

@sevillaarvin It's a modified version of https://gist.github.com/lastguest/1fd181a9c9db0550a847#gistcomment-2643755

The original has a custom object nesting algorithm. There's no official standard for converting Object to string values. URLSearchParams are always string values. Convert your nested objects to string beforehand or line (eg: with JSON.stringify(value))

import qs from 'querystring';
qs.stringify({ 'key': 'value' })

this worked really well for me.

import qs from 'querystring';
qs.stringify({ 'key': 'value' })

this worked really well for me.

The gist was from 7 years ago... hopefully things have improved since then 😅

import qs from 'querystring';
qs.stringify({ 'key': 'value' })

this worked really well for me.

The gist was from 7 years ago... hopefully things have improved since then sweat_smile
not as much as you'd think :-)