JavaScript function to convert a JSON key key object to a query string

Question

I am working on formatting the URL for the Facebook Feed dialog box . There are so many options. I want to have a function for these dialogs, for example:

function generateDialogUrl(dialog, params) { base = "http://www.facebook.com/dialog/" + dialog + "?"; tail = []; for (var p in params) { if (params.hasOwnProperty(p)) { tail.push(p + "=" + escape(params[p])); } } return base + tail.join("&") } 

Oh wow ... I guess I just answered my question. It is right? Is escape() correct function?

I am stuck in source code lovers .

UPDATE: Since we use jQuery, I rewrote the method using jQuery.each . I also replaced escape() with encodeURIComponent() , as suggested by @galambalazs and @TJ Crowder. Thanks guys!

 var generateDialogUrl = function (dialog, params) { base = "http://www.facebook.com/dialog/" + dialog + "?"; tail = []; $.each(params, function(key, value) { tail.push(key + "=" + encodeURIComponent(value)); }) return base + tail.join("&"); } 

He works!

Answer 1

Better yet, use encodeURIComponent . See article comparing two:

The escape () method does not encode the + character, which is interpreted as space on the server side, as well as generated by forms with spaces in their fields. Due to this drawback and the fact that this function does not work to handle non-ASCII characters correctly, you should avoid using escape () whenever possible. The best alternative is usually encodeURIComponent () .

escape () will not encode: @ * / +

Answer 2

There is a jQuery way to accomplish this: $. param . It will work as follows:

 var generateDialogUrl = function (dialog, params) { base = 'http://www.facebook.com/dialog/' + dialog + '?'; return base + $.param(params); } 

Answer 3

 convertJsonToQueryString: function (json, prefix) { //convertJsonToQueryString({ Name: 1, Children: [{ Age: 1 }, { Age: 2, Hoobbie: "eat" }], Info: { Age: 1, Height: 80 } }) if (!json) return null; var str = ""; for (var key in json) { var val = json[key]; if (isJson(val)) { str += convertJsonToQueryString(val, ((prefix || key) + ".")); } else if (typeof (val) == "object" && ("length" in val)) { for (var i = 0; i < val.length; i++) { //debugger str += convertJsonToQueryString(val[i], ((prefix || key) + "[" + i + "].")); } } else { str += "&" + ((prefix || "") + key) + "=" + val; } } return str ? str.substring(1) : str; } isJson = function (obj) { return typeof (obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length; }; 

Example:

 convertJsonToQueryString({Name:1,Children:[{Age:1},{Age:2,Hoobbie:"eat"}],Info:{Age:1,Height:80}}) 

Result:

 "Name=1Children[0].Age=1Children[1].Age=2&Children[1].Hoobbie=eatInfo.Age=1&Info.Height=80" 

Answer 4

 const createQueryParams = (param, prefix = '') => { let queryString = ''; if (param.constructor === Object) { queryString = Object.keys(param).reduce((result, key) => { const obj = param[key]; const queryParam = result ? '${result}&${prefix}' : prefix; if (obj.constructor === Object) { return '${queryParam}${createQueryParams(obj, '${key}.')}'; } else if(obj.constructor === Array) { const qp= obj.map((item, index)=> { if (item.constructor === Object || item.constructor === Array) { const query = createQueryParams(item, '${key}[${index}].'); return '${query}'; } else { return '${key}[${index}]=${item}'; } }).reduce((res, cur) => { return res ? '${res}&${cur}': '${cur}'; }, ''); return '${queryParam}${qp}'; } else { return '${queryParam}${key}=${obj}'; } }, ''); } else if(param.constructor === Array) { queryString = param.reduce((res, cur) => '${res},${cur}'); } else { queryString = param; } return encodeURI(queryString); }; 

Example:

 createQueryParams({"Context":{"countryCode":"NO"},"Pagination":{"limit":10,"offset":1},"AdditionalField":[{"name":"Policy Number","value":"Pol123"},{"name":"Policy Version","value":"PV1"}]});