Convertir objet javascript pour les paramètres d'URL

Je me rends compte que, fondamentalement, je vais probablement au sujet de cette façon le mal donc je suis ouvert à toutes les pousse dans la bonne direction.

Je suis en train d'utiliser le HipChat API pour envoyer une notification à une chambre de la sorte:

https://www.hipchat.com/docs/api/method/rooms/message

Je suis en train de construire l'URL dans l'exemple avec un js de paramètres de l'objet, donc, fondamentalement, je suis en train de convertir ce:

var hipChatSettings = {
            format:"json",
            auth_token:token,
            room_id: 1,
            from: "Notifications",
            message: "Message"
        }

À ceci:

https://api.hipchat.com/v1/rooms/message?format=json&auth_token=token&room_id=1&from=Notifications&message=Message

InformationsquelleAutor user2865446 | 2014-03-27
  1. 48

    Vous devriez vérifier ce jQuery.param fonction.

    JS:

    var params = { width:1680, height:1050 };
var str = jQuery.param( params );
console.log(str);

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    • (J'aurais dit, j'ai été à l'aide de jQuery, mais vous oobviously lire mon esprit) 🙂
    • Il ne savait pas lire dans votre esprit. Juste que sur le Dépassement de la Pile lorsque vous demandez quelque chose à propos de JavaScript, vous obtiendrez quatre-vingt-dix jQuery réponses, même si vous l'avez explicitement dire que vous ne voulez pas jQuery réponses. Rappelez-vous ce, dans l'avenir, lorsque vous voulez un non-jQuery JavaScript réponse. 😉
    • Vous avez raison, mais jQuery réponses peuvent être utiles pour d'autres gens viennent ici de google, même lorsqu'ils sont inutiles pour l'OP. Donc je pense que c'est bon de la mode.
    • Il ne savait pas lire dans votre esprit. Il la regarda à vos mots clés. Donc, ce échappé à mon habitude downvote à une telle pratique.
    InformationsquelleAutor mithunsatheesh
  2. 40
    Object.keys(hipChatSettings).map(function(k) {
    return encodeURIComponent(k) + "=" + encodeURIComponent(hipChatSettings[k]);
}).join('&')
//=> "format=json&auth_token=token&room_id=1&from=Notifications&message=Message"

    Avertissement: newish JavaScript. Si vous voulez qu'il fonctionne sur les anciens, cale ou de réécriture dans for.

    InformationsquelleAutor Amadan
  3. 12

    Quelque chose comme cela pourrait fonctionner pour vous

    var str = "?" + Object.keys(hipChatSettings).map(function(prop) {
  return [prop, hipChatSettings[prop]].map(encodeURIComponent).join("=");
}).join("&");

//"?format=json&auth_token=token&room_id=1&from=Notifications&message=Message"

    Si vous ne pouvez pas dépendre ECMAScript 5, vous pouvez utiliser une simple boucle for

    var pairs = [];

for (var prop in hipChatSettings) {
  if (hipChatSettings.hasOwnProperty(prop)) {
    var k = encodeURIComponent(prop),
        v = encodeURIComponent(hipChatSettings[prop]);
    pairs.push( k + "=" + v);
  }
}

var str = "?" + pairs.join("&");
    • J'aime cette réponse. Pour ES6 vous pouvez modifier un peu plus de function makeParams(params) => { return params ? '?' + Object.keys(params).map((key) => ([key, params[key]].map(encodeURIComponent).join("="))).join("&") : '' } qui vous pouvez simplement ajouter sur votre chemin, path + makeParams(params) et il ne gère pas défini, la valeur null et {}
    InformationsquelleAutor maček
  4. 2

    ES6 version, peut faire vraiment des objets imbriqués avec les tableaux

    encodeURI(getUrlString({a: 1, b: [true, 12.3, "chaîne de caractères"]}))

    getUrlString (params, keys = [], isArray = false) {
  const p = Object.keys(params).map(key => {
    let val = params[key]

    if ("[object Object]" === Object.prototype.toString.call(val) || Array.isArray(val)) {
      if (Array.isArray(params)) {
        keys.push("")
      } else {
        keys.push(key)
      }
      return getUrlString(val, keys, Array.isArray(val))
    } else {
      let tKey = key

      if (keys.length > 0) {
        const tKeys = isArray ? keys : [...keys, key]
        tKey = tKeys.reduce((str, k) => { return "" === str ? k : `${str}[${k}]` }, "")
      }
      if (isArray) {
        return `${ tKey }[]=${ val }`
      } else {
        return `${ tKey }=${ val }`
      }

    }
  }).join('&')

  keys.pop()
  return p
}
    • en fait, seul cette réponse qui fonctionne pour multi niveau des objets imbriqués/tableaux, à l'exception de jQuery un, mais la lib jQuery est trop grand si seulement utilisé pour cette seule fin
    • Fonctionne très bien avec des objets imbriqués, c'est le meilleur que j'ai trouvé, j'ai seulement ajouté encodeURIComponent(val).
    InformationsquelleAutor Boris Barroso
  5. 1

    La fin de la danse, mais j'ai bien aimé la brièveté de cette:

      Object.entries(hipChatSettings)
    .map(
      ([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`
    )
    .join("&");
    • c'est cool, c'est parfait!
    InformationsquelleAutor Adrian Bartholomew