Is there any native function to convert json to url parameters?

Question

I need convert json object to url form like: \"parameter=12&asd=1\"

I done with this:

        var data = {
            \'action\':\'actualiza_res         


        

Answer 1

Best solution for Vanilla JavaScript:

var params = Object.keys(data)
  .filter(function (key) {
    return data[key] ? true : false
  })
  .map(function (key) {
    return encodeURIComponent(key) + '=' + encodeURIComponent(data[key])
  })
  .join('&');

PS: The filter is used here to remove null or undefined parameters. It makes the url look cleaner.

Answer 2

The custom code above only handles flat data. And JQuery is not available in react native. So here is a js solution that does work with multi-level objects and arrays in react native.

function formurlencoded(data) {
const opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

let sorted = Boolean(opts.sorted),
    skipIndex = Boolean(opts.skipIndex),
    ignorenull = Boolean(opts.ignorenull),
    encode = function encode(value) {
        return String(value).replace(/(?:[\0-\x1F"-&\+-\}\x7F-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])/g, encodeURIComponent).replace(/ /g, '+').replace(/[!'()~\*]/g, function (ch) {
            return '%' + ch.charCodeAt().toString(16).slice(-2).toUpperCase();
        });
    },
    keys = function keys(obj) {
        const keyarr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Object.keys(obj);
        return sorted ? keyarr.sort() : keyarr;
    },
    filterjoin = function filterjoin(arr) {
        return arr.filter(function (e) {
            return e;
        }).join('&');
    },
    objnest = function objnest(name, obj) {
        return filterjoin(keys(obj).map(function (key) {
            return nest(name + '[' + key + ']', obj[key]);
        }));
    },
    arrnest = function arrnest(name, arr) {
        return arr.length ? filterjoin(arr.map(function (elem, index) {
            return skipIndex ? nest(name + '[]', elem) : nest(name + '[' + index + ']', elem);
        })) : encode(name + '[]');
    },
    nest = function nest(name, value) {
        const type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : typeof value === 'undefined' ? 'undefined' : typeof(value);
        let f = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;

        if (value === f) f = ignorenull ? f : encode(name) + '=' + f; else if (/string|number|boolean/.test(type)) f = encode(name) + '=' + encode(value); else if (Array.isArray(value)) f = arrnest(name, value); else if (type === 'object') f = objnest(name, value);

        return f;
    };

return data && filterjoin(keys(data).map(function (key) {
    return nest(key, data[key]);
}));

}

Answer 3

Using ES6 syntax:

var data = {
  'action':'actualiza_resultado',
  'postID': 1,
  'gl': 2,
  'gl2' : 3
};

let urlParameters = Object.entries(data).map(e => e.join('=')).join('&');

console.log(urlParameters);

Answer 4

This one processes arrays with by changing the nameinto mutiple name[]

function getAsUriParameters (data) {
  return Object.keys(data).map(function (k) {
    if (_.isArray(data[k])) {
      var keyE = encodeURIComponent(k + '[]');
      return data[k].map(function (subData) {
        return keyE + '=' + encodeURIComponent(subData);
      }).join('&');
    } else {
      return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);
    }
  }).join('&');
};

Answer 5

jQuery provides param that does exactly that. If you don't use jquery, take at look at the source.

Basically, it goes like this:

url = Object.keys(data).map(function(k) {
    return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
}).join('&')

2019 update: there's now a built-in object URLSearchParams for this type of thing:

let myParams = {'foo': 'hi there', 'bar': '???'};

let u = new URLSearchParams(myParams).toString();

console.log(u);