JSON

Query-String

Was macht JSON zu Query-String?

Du hast in deinem Code eine JSON-Konfiguration gebaut — Filterparameter, ein Analytics-Payload, einen OAuth-State — und musst sie jetzt an eine URL hängen. Diese Seite übernimmt diesen letzten, langweiligen Schritt. JSON links einfügen, rechts kommt ?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2&tag=premium&tag=verified zurück, fertig zum Reinkopieren in einen Link, einen fetch-Aufruf oder eine Webhook-URL. Arrays werden zu wiederholten Keys (die Konvention, die jeder moderne Server versteht), Werte werden korrekt prozent-codiert, und das führende ? ist dabei, damit du direkt in eine URL einfügen kannst.

Die Umwandlung nutzt das im Browser eingebaute URLSearchParams — dieselbe Primitive, die dein Server-Framework benutzt, um den zurückkommenden Request zu parsen. URLSearchParams erzeugt gemäß WHATWG URL Standard application/x-www-form-urlencoded-Ausgabe, und dein JSON wird mit JSON.parse gemäß RFC 8259 geparst. Zahlen und Booleans werden in Strings umgewandelt (Query-Strings haben kein Typsystem), null- und undefined-Werte werden übersprungen, und verschachtelte Objekte werfen einen lesbaren Fehler, sodass du sie abflachen kannst.

Alles läuft lokal im Browser — kein Upload, keine Server-Roundtrips, kein Logging. Wenn du das umgekehrte Problem hast (Query-String und du willst JSON), nimm Query-String zu JSON. Willst du die ganze URL in Protokoll, Host, Pfad und Search-Teil zerlegen, sind die Seite URL zu JSON oder der URL-Parser besser geeignet. Die Prozent-Codierungsregeln, die hier greifen, sind in RFC 3986 §2.1 festgelegt, und das umfassendere URL-Parsing-Modell findest du in der MDN URL API-Referenz.

So konvertierst du JSON in einen Query-String

Drei Schritte. Jeder entspricht einem Button auf der Seite.

JSON-Objekt einfügen

Wirf das JSON ins linke Panel. Der Top-Level-Wert muss ein Objekt sein — Arrays und Primitive lassen sich nicht sauber auf Query-Parameter abbilden. Klick auf Beispiel für ein realistisches E-Commerce-Filter-Payload mit String, Zahl, Klammer-Key und Array. Beispiel:

{
  "customer": "Ava Chen",
  "status": "active",
  "total[gte]": "49.99",
  "page": 2,
  "tag": ["premium", "verified"]
}

Zahlen und Booleans werden in Strings umgewandelt (Query-Strings tragen keine Typen). <code>null</code>- und <code>undefined</code>-Werte werden übersprungen — sonst würden sie die URL nur unnötig aufblähen.

Query-String lesen

Das rechte Panel aktualisiert sich beim Tippen. Das obige Beispiel erzeugt ?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2&tag=premium&tag=verified. Leerzeichen werden zu + (Form-Encoded-Stil — siehe FAQ), eckige Klammern zu %5B/%5D, und das tag-Array wird in zwei separate tag=-Parameter aufgespalten.

Kopieren oder herunterladen

Klick auf Kopieren, um den Query-String in die Zwischenablage zu legen, oder auf Herunterladen, um ihn als querystring.txt zu speichern. Leeren setzt das Eingabefeld zurück.

Wann du das wirklich brauchst

Teilbare Filter-URLs bauen

In deinem Dashboard kann ein Nutzer Bestellungen nach Kunde, Status und Datumsbereich filtern. Der Zustand liegt als JSON-Objekt in der Komponente ({customer: "Marco Rivera", status: "active", date_from: "2026-04-01"}). Damit die Ansicht teilbar ist, hängst du das an die URL — JSON hier einfügen, Query-String kopieren, fertig. Gilt genauso für Kategorieseiten im E-Commerce, Suchergebnisse, alles mit zustandsbehafteten Filtern.

Webhook-Callback-URLs zusammenbauen

Stripe, GitHub und die meisten Webhook-Sender lassen dich Metadaten in den Query-String der Callback-URL packen. Du hast ein JSON-Objekt mit Nutzerinfo ({userId: "USR-1001", source: "checkout", flow: "onboarding"}) und musst es an https://api.example.com/webhook?... anhängen. Einfügen, kopieren, einfügen — viel besser als jeden Wert von Hand URL-zu-codieren und zu raten, welche Zeichen escapt werden müssen.

OAuth- und OpenID-URLs erzeugen

OAuth-Authorize-URLs haben 8 bis 12 Query-Parameter: client_id, redirect_uri, scope, state, response_type usw. Das Ganze erst in JSON aufzuschreiben (für Übersicht) und hier zu konvertieren ist schneller, als Strings zusammenzubauen und auf die richtige Codierung zu hoffen. Der state-Parameter trägt oft eine Nonce und einen Rückkehrpfad, die selbst wieder eigenes Escaping brauchen.

API-Requests in HTTP-Clients bauen

Wenn du einen API-Endpunkt mit cURL, Postman oder einem schnellen fetch() testest, hast du die Parameter meistens als JSON-Snippet aus der Doku. Hier konvertieren, an die URL hängen, Request abfeuern. Der Produktfilter für Bestellung ORD-1001 {"sku": "SKU-101", "include": "variants"} wird in einem Einfügen zu ?sku=SKU-101&include=variants.

Häufige Fragen

Warum werden Leerzeichen als + statt %20 codiert?

Weil die Ausgabe form-encoded (application/x-www-form-urlencoded) ist — das, was jeder Browser sendet und jeder Server in einem Query-String erwartet. RFC 3986 bevorzugt technisch %20 in URI-Komponenten, aber die Form-Encoded-Konvention mit + für Leerzeichen ist älter als RFC 3986 und wird in Query-Strings seit den 90ern benutzt. Jedes moderne Server-Framework decodiert beides — Express, FastAPI, ASP.NET, Spring, Rails, Django, was du willst. Wenn du wirklich %20 brauchst, jag die Ausgabe schnell durch .replace(/\+/g, "%20").

Wie werden Arrays codiert?

Sie werden zu wiederholten Keys aufgespalten. {"tag": ["premium", "verified"]} wird zu tag=premium&tag=verified. Das ist die Konvention, die URLSearchParams produziert, und sie geht sauber via URLSearchParams.getAll() auf der Empfängerseite hin und zurück. Wenn dein Server Klammer-Notation erwartet (tag[]=premium&tag[]=verified) — typisch in PHP und Rails — benenn den JSON-Key tag[] statt tag.

Kann ich verschachtelte Objekte im JSON haben?

Nein — Query-Strings sind per Design flach. Die Seite gibt einen klaren Fehler aus, sobald sie ein verschachteltes Objekt sieht, sodass du es abflachen kannst. Der häufigste Workaround sind Klammer-Keys: statt {"filter": {"status": "active"}} schreib {"filter[status]": "active"}. Frameworks wie Rails, PHP und qs.js parsen das auf Server-Seite zurück in verschachtelte Objekte. Oder flach es einfach gedanklich ab: {"status": "active"}, falls keine echte Mehrdeutigkeit besteht.

Was passiert mit null- und undefined-Werten?

Sie werden übersprungen. {"customer": "Ava Chen", "status": null} ergibt ?customer=Ava+Chen, nicht ?customer=Ava+Chen&status=. Begründung: status= in der URL bedeutet "leerer String", das ist ein echter Wert und etwas anderes als "kein Status". null als leer zu schicken wäre verlustbehaftet und verwirrend. Wenn du wirklich status= willst, schick {"status": ""}.

Bleiben Zahlen und Booleans als Typen erhalten?

Nein — Query-Strings tragen nur Strings. {"page": 2} wird zu page=2, und {"debug": true} wird zu debug=true. Dein Server-Code muss das Schema kennen und sie zurückkonvertieren. Das gehört zu Query-Strings (und Form-Daten) dazu — das Drahtformat unterscheidet nicht zwischen der Zahl 2 und dem String "2". Brauchst du typisierte Parameter, schick sie im Request-Body als JSON.

Wie geht es mit Unicode und Emojis in Keys oder Werten um?

Sauber. URLSearchParams codiert die Bytes als UTF-8 und prozent-escapet alles außerhalb des sicheren Zeichensatzes. {"name": "中文"} wird also zu name=%E4%B8%AD%E6%96%87, und {"reaction": "🔥"} wird zu reaction=%F0%9F%94%A5. Auf der Empfängerseite decodiert URLSearchParams (oder der Query-Parser deines Frameworks) das direkt zurück. Es gibt keine Encoding-Einstellung zum Drehen — UTF-8 ist das, was der URL Standard vorschreibt.

Wofür ist das führende Fragezeichen gut?

Damit du die Ausgabe direkt an eine URL hängen kannst — https://shop.example.com/orders + ?customer=Ava+Chen&page=2 = funktionierende URL. Wenn du an eine URL anhängst, die schon einen Query-String hat, lass das ? weg und nimm &. Wenn deine Eingabe leer oder {} ist, ist die Ausgabe ebenfalls leer (kein einzelnes ?).

Weitere URL- und JSON-Tools

Einen Query-String zu bauen ist eine Operation. Das hier passt gut dazu: