Y a-t-il une fonction native pour convertir JSON en paramètres d'URL?

Question

J'ai besoin de convertir un objet JSON en forme d'URL comme : "paramètre=12&asd=1"

J'ai terminé avec ceci :

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

        var string_=JSON.stringify(data);

        string_=string_.replace(/{/g, "");
        string_=string_.replace(/}/g, "");
        string_=string_.replace(/:/g, "=")
        string_=string_.replace(/,/g, "&");
        string_=string_.replace(/"/g, "");

Mais je me demande s'il y a une fonction en JavaScript ou dans l'objet JSON pour le faire?

Answer 1

Utilisez l'interface URLSearchParams, intégrée aux navigateurs et à Node.js à partir de la version 10, sortie en 2018.

const myParams = {'foo': 'salut', 'bar': '???'};

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

console.log(u);

Ancienne réponse : jQuery fournit param qui fait exactement cela. Si vous n'utilisez pas jQuery, jetez un œil au code source.

Essentiellement, ça se passe comme ça :

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

Answer 2

Utilisation de la syntaxe ES6 :

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 3

J'ai réalisé une implémentation qui prend en charge les objets et les tableaux imbriqués, c'est-à-dire :

var data = {
    users: [
    {
      "name": "jeff",
      "tasks": [
        "Faire une chose",
        "Faire une deuxième chose"
      ]
    },
    {
      "name": "rick",
      "tasks": [
        "Never gonna give you up",
        "Never gonna let you down"
      ]
    }
  ]
}

Sera :

users[0][name]=jeff&users[0][tasks][0]=Faire%20une%20chose&users[0][tasks][1]=Faire%20une%20deuxième%20chose&users[1][name]=rick&users[1][tasks][0]=Never%20gonna%20give%20you%20up&users[1][tasks][1]=Never%20gonna%20let%20you%20down

Voici donc l'implémentation :

var isObj = function(a) {
  if ((!!a) && (a.constructor === Object)) {
    return true;
  }
  return false;
};
var _st = function(z, g) {
  return "" + (g != "" ? "[" : "") + z + (g != "" ? "]" : "");
};
var fromObject = function(params, skipobjects, prefix) {
  if (skipobjects === void 0) {
    skipobjects = false;
  }
  if (prefix === void 0) {
    prefix = "";
  }
  var result = "";
  if (typeof(params) != "object") {
    return prefix + "=" + encodeURIComponent(params) + "&";
  }
  for (var param in params) {
    var c = "" + prefix + _st(param, prefix);
    if (isObj(params[param]) && !skipobjects) {
      result += fromObject(params[param], false, "" + c);
    } else if (Array.isArray(params[param]) && !skipobjects) {
      params[param].forEach(function(item, ind) {
        result += fromObject(item, false, c + "[" + ind + "]");
      });
    } else {
      result += c + "=" + encodeURIComponent(params[param]) + "&";
    }
  }
  return result;
};

var data = {
  users: [{
      "name": "jeff",
      "tasks": [
        "Faire une chose",
        "Faire une deuxième chose"
      ]
    },
    {
      "name": "rick",
      "tasks": [
        "Never gonna give you up",
        "Never gonna let you down"
      ]
    }
  ]
}

document.write(fromObject(data));

Answer 4

Comme @georg l'a dit, vous pouvez utiliser JQuery.param pour les objets plats.

Si vous avez besoin de traiter des objets complexes, vous pouvez utiliser JsonUri, un package python qui fait exactement cela. Il existe également une bibliothèque JavaScript pour cela.

Avertissement : Je suis l'auteur de JSONURI

Éditer : J'ai appris bien plus tard que vous pouvez également simplement encoder votre charge utile en base64 - la plupart des langues supportent l'encodage/décodage en base64

Exemple

x = {name: 'Petter', age: 47, places: ['Mozambique', 'Zimbabwe']}
stringRep = JSON.stringify(x)
encoded = window.btoa(stringRep)

Vous donne eyJuYW1lIjoiUGV0dGVyIiwiYWdlIjo0NywicGxhY2VzIjpbIk1vemFtYmlxdWUiLCJaaW1iYWJ3ZSJdfQ==, que vous pouvez utiliser comme paramètre uri

decoded = window.atob(encoded)
originalX = JSON.parse(decoded)

Inutile de dire que cela vient avec ses propres avertissements

Answer 5

Vous n'avez pas besoin de sérialiser cet objet littéral.

Une meilleure approche est quelque chose comme :

function getAsUriParameters(data) {
   var url = '';
   for (var prop in data) {
      url += encodeURIComponent(prop) + '=' + 
          encodeURIComponent(data[prop]) + '&';
   }
   return url.substring(0, url.length - 1)
}
getAsUriParameters(data); //"action=actualiza_resultado&postID=1&gl=2&gl2=3"