Gibt es eine native Funktion zum Konvertieren von JSON in URL-Parameter?

Lesezeit: 6 Minuten

Benutzer-Avatar
fpilee

Ich muss JSON-Objekt in URL-Form konvertieren wie: “parameter=12&asd=1”

Ich habe damit fertig:

        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, "");

Aber ich frage mich, ob es eine Funktion in Javascript oder im JSON-Objekt gibt, um dies zu tun?

Benutzer-Avatar
georg

Verwenden Sie die URLSearchParams Schnittstelle, die eingebaut ist Browser und Node.js ab Version 10veröffentlicht im Jahr 2018.

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

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

console.log(u);

Alte Antwort: jQuery bietet param das macht genau das. Wenn Sie jquery nicht verwenden, sehen Sie sich die an Quelle.

Im Grunde geht das so:

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

  • Es mag einige Leute geben, die „daran interessiert sind, das Rad neu zu erfinden“, weil sie jQuery nicht verwenden – aus welchen guten oder schlechten Gründen auch immer.

    – Cornelius

    30. März 2015 um 13:28 Uhr

  • Wenn Sie jquery nicht verwenden, erfinden Sie das Rad nicht neu, haben Sie schon von underscorejs gehört?

    – Hamam

    13. August 2015 um 10:20 Uhr

  • Nützlich innerhalb eines Webs Arbeiter() Kontext – wo es kein jQuery gibt

    – Jimconte

    15. November 2018 um 15:56 Uhr

  • Update: Sie können native URLSearchParams verwenden: developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

    – Ofer Segev

    3. September 2019 um 8:37 Uhr

  • Probleme mit verschachtelten Objekten mit URLSearchParams

    – Mladen Janjetović

    30. September 2020 um 11:01 Uhr

Benutzer-Avatar
Tareq

Verwendung der 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);

  • Die Frage bezog sich auf JSON-Objekte. Wenn JSON jedoch ein Array enthält, wird die Lösung ebenfalls ein gutes Ergebnis liefern, aber es muss auf der Serverseite geparst werden. Beispiel: var data = { ‘action’:’actualiza_resultado’, ‘postID’: 1, ‘gl’: 2, ‘gl2’ : 3, ‘names’: [‘one’,’two’, ‘three’] }; Ergebnis: “action=actualiza_resultado&postID=1&gl=2&gl2=3&names=one,two,three”

    – Tarek

    3. November 2016 um 10:29 Uhr


  • Keine Notwendigkeit dafür. Es gibt einen eingebauten.

    – Dan Dascalescu

    6. April um 18:07 Uhr

Ich habe eine Implementierung erstellt, die verschachtelte Objekte und Arrays unterstützt, dh

var data = {
    users: [
    {
      "name": "jeff",
      "tasks": [
        "Do one thing",
        "Do second thing"
      ]
    },
    {
      "name": "rick",
      "tasks": [
        "Never gonna give you up",
        "Never gonna let you down"
      ]
    }
  ]
}

Wird sein:

users[0][name]=jeff&users[0][tasks][0]=Do%20one%20thing&users[0][tasks][1]=Do%20second%20thing&users[1][name]=rick&users[1][tasks][0]=Never%20gonna%20give%20you%20up&users[1][tasks][1]=Never%20gonna%20let%20you%20down

Also, hier ist die Implementierung:

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": [
        "Do one thing",
        "Do second thing"
      ]
    },
    {
      "name": "rick",
      "tasks": [
        "Never gonna give you up",
        "Never gonna let you down"
      ]
    }
  ]
}

document.write(fromObject(data));

  • Unterschätzte Antwort! +1

    – Uche Ozoemena

    25. August 2020 um 22:42 Uhr

  • aber wie entschlüsselt man diese verschlüsselte Zeichenfolge?

    – leonardosccd

    19. Januar um 8:55 Uhr

  • Verschachtelung ist nicht spezifiziert und hat viele Grenzfälle. Siehe die Query-String-Modul. In den meisten Fällen möchten Sie das integrierte URLSearchParams verwenden.

    – Dan Dascalescu

    6. April um 19:37 Uhr

Sie müssen dieses Objektliteral nicht serialisieren.

Besserer Ansatz ist so etwas wie:

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"

Benutzer-Avatar
Cézar D.

Etwas, das ich in ES6 gut aussehend finde:

function urlfy(obj) {
    return Object
        .keys(obj)
        .map(k => `${encodeURIComponent(k)}=${encodeURIComponent(obj[k])}`)
        .join('&');
}

Späteres Update (dasselbe, vielleicht etwas sauberer):

const urlfy = obj => Object
    .keys(obj)
    .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]))
    .join('&');

  • besser als @Tareq

    – Känguru

    13. Februar 2019 um 3:18 Uhr

  • @kangear: noch besser – benutze das eingebaute.

    – Dan Dascalescu

    6. April um 18:08 Uhr

Wie @georg sagte, können Sie verwenden JQuery.param für flache Gegenstände.

Wenn Sie komplexe Objekte verarbeiten müssen, können Sie verwenden JsonUri, ein Python-Paket, das genau das tut. Es gibt auch eine JavaScript-Bibliothek dafür

Haftungsausschluss: Ich bin der Autor von JSONURI

Bearbeiten: Ich habe viel später erfahren, dass Sie Ihre Nutzlast auch nur mit Base64 codieren können – die meisten Sprachen unterstützen die Base64-Codierung / -Decodierung

Beispiel

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

Gibt Ihnen eyJuYW1lIjoiUGV0dGVyIiwiYWdlIjo0NywicGxhY2VzIjpbIk1vemFtYmlxdWUiLCJaaW1iYWJ3ZSJdfQ==die Sie als URI-Parameter verwenden können

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

Unnötig zu erwähnen, dass es mit seinen eigenen Einschränkungen einhergeht

  • besser als @Tareq

    – Känguru

    13. Februar 2019 um 3:18 Uhr

  • @kangear: noch besser – benutze das eingebaute.

    – Dan Dascalescu

    6. April um 18:08 Uhr

Aber ich frage mich, ob es eine Funktion in Javascript gibt

Nichts im Kern vorgeschrieben.

oder json, um dies zu tun?

JSON ist ein Datenformat. Es hat überhaupt keine Funktionen.


Dies ist jedoch ein relativ triviales Problem, zumindest für flache Datenstrukturen.

Codieren Sie die Objekte nicht als JSON, dann:

function obj_to_query(obj) {
    var parts = [];
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
        }
    }
    return "?" + parts.join('&');
}

alert(obj_to_query({
    'action': 'actualiza_resultado',
    'postID': 1,
    'gl': 2,
    'gl2': 3
}));  

Es gibt keinen Standardweg, um komplexe Datenstrukturen (z. B. mit verschachtelten Objekten oder Arrays) zu codieren. Es wäre jedoch nicht schwierig, dies zu erweitern, um die PHP-Methode (mit eckigen Klammern in Feldnamen) oder ähnliches zu emulieren.

  • Perfekt für das, was ich brauchte: JSON-zu-„application/x-www-form-urlencoded“-Konverter für Angular 2 Http.post-Body-Inhalte. Vielen Dank.

    – Chris Snowden

    7. Januar 2016 um 11:43 Uhr


  • @Quentin wird es behandelt, wenn einer der Parameter ein Array ist?

    – Santhosh

    15. Februar 2017 um 10:24 Uhr

  • @SanKrish – Ich habe dies in der Antwort, in der “zumindest für flache Datenstrukturen” steht, sowie im gesamten letzten Absatz ausdrücklich darauf hingewiesen.

    – QUentin

    15. Februar 2017 um 10:31 Uhr

  • Jetzt gibt es eine eingebaute.

    – Dan Dascalescu

    6. April um 18:09 Uhr

1136510cookie-checkGibt es eine native Funktion zum Konvertieren von JSON in URL-Parameter?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy