JSON

Query String

Hvad gør JSON til Query String?

Du har bygget en JSON-konfiguration i koden — filterparametre, et analytics-payload, en OAuth-state — og nu skal den hænges på en URL. Den her side klarer det kedelige sidste stykke. Indsæt JSON'en til venstre, få ?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2&tag=premium&tag=verified tilbage til højre, klar til at smide ind i et link, et fetch-kald eller en webhook-URL. Arrays foldes ud til gentagne nøgler (konventionen, som enhver moderne server forstår), værdierne procent-kodes ordentligt, og det indledende ? er med, så du kan indsætte direkte i en URL.

Konverteringen bruger browserens indbyggede URLSearchParams — den samme primitiv, som dit server-framework bruger til at parse den indkomne forespørgsel. URLSearchParams producerer application/x-www-form-urlencoded-output i overensstemmelse med WHATWG URL Standard, og din JSON parses af JSON.parse efter RFC 8259. Tal og booleans tvinges til strenge (query-strenge har ikke noget typesystem), null- og undefined-værdier springes over, og indlejrede objekter kaster en pæn fejl, så du kan flade dem ud.

Det hele kører lokalt i din browser — ingen upload, ingen serverrundtur, ingen logning. Har du det modsatte problem (en query-streng, og du vil have JSON), så brug Query String til JSON. Vil du pille hele URL'en fra hinanden i protokol, host, sti og search-del, passer siden URL til JSON eller URL Parser bedre. Reglerne for procent-kodning, der er i spil her, er defineret i RFC 3986 §2.1, og den bredere model for URL-parsning ligger i referencen til MDN URL API.

Sådan konverterer du JSON til en query-streng

Tre trin. Hvert trin svarer til en knap på siden.

Indsæt JSON-objektet

Smid JSON'en ind i venstre panel. Top-level-værdien skal være et objekt — arrays og primitiver kan ikke mappes pænt til query-parametre. Klik på Eksempel for et realistisk e-handelsfilter-payload med en streng, et tal, en nøgle i firkantede parenteser og et array. Eksempel:

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

Tal og booleans tvinges til strenge (query-strenge bærer ikke typer). <code>null</code>- og <code>undefined</code>-værdier springes over — ellers ville de bare rode URL'en til.

Læs query-strengen

Højre panel opdaterer sig, mens du skriver. Eksemplet ovenfor giver ?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2&tag=premium&tag=verified. Mellemrum bliver + (form-encoded-stil — se FAQ), firkantede parenteser bliver %5B/%5D, og tag-arrayen foldes ud til to separate tag=-parametre.

Kopiér eller download

Klik på Kopiér for at sende query-strengen til udklipsholderen, eller på Download for at gemme den som querystring.txt. Ryd nulstiller inputpanelet.

Hvornår du faktisk vil bruge det her

Bygge delbare filter-URL'er

Dit dashboard lader brugeren filtrere ordrer på kunde, status og datointerval. Tilstanden lever som et JSON-objekt i komponenten ({customer: "Marco Rivera", status: "active", date_from: "2026-04-01"}). For at gøre visningen delbar hænger du det på URL'en — indsæt JSON'en her, kopiér query-strengen, færdig. Det samme gælder kategorisider i e-handel, søgeresultater, alt hvad der har filtre med tilstand.

Sætte webhook-callback-URL'er sammen

Stripe, GitHub og de fleste webhook-afsendere lader dig putte metadata i query-strengen i callback-URL'en. Du har et JSON-objekt, der beskriver brugeren ({userId: "USR-1001", source: "checkout", flow: "onboarding"}), og det skal hænges på https://api.example.com/webhook?.... Indsæt, kopiér, indsæt — meget bedre end at URL-kode hver værdi i hånden og bekymre sig om, hvilke tegn der skal escapes.

Generere OAuth- og OpenID-URL'er

OAuth-authorize-URL'er er 8–12 query-parametre: client_id, redirect_uri, scope, state, response_type osv. At bygge en i JSON først (for at se den pænt) og konvertere her er hurtigere end at klistre strenge sammen og håbe, at kodningen ramte rigtigt. state-parameteren bærer ofte en nonce og en return-sti, der hver især skal escapes.

Bygge API-kald i HTTP-klienter

Når du tester et API-endpoint i cURL, Postman eller et hurtigt fetch(), har du som regel parametrene som et JSON-stykke fra dokumentationen. Konvertér her, hæng det på URL'en, fyr kaldet af. Produktfiltret for ordre ORD-1001 {"sku": "SKU-101", "include": "variants"} bliver til ?sku=SKU-101&include=variants i én indsætning.

Almindelige spørgsmål

Hvorfor kodes mellemrum som + i stedet for %20?

Fordi outputtet er form-encoded (application/x-www-form-urlencoded) — det enhver browser sender, og det enhver server forventer i en query-streng. RFC 3986 foretrækker teknisk %20 i URI-komponenter, men form-encoded-konventionen med + for mellemrum er ældre end RFC 3986 og er det, query-strenge har brugt siden 90'erne. Alle moderne server-frameworks dekoder begge — Express, FastAPI, ASP.NET, Spring, Rails, Django, hvad som helst. Hvis du absolut har brug for %20, så kør et hurtigt .replace(/\+/g, "%20") på outputtet.

Hvordan kodes arrays?

De foldes ud til gentagne nøgler. {"tag": ["premium", "verified"]} bliver til tag=premium&tag=verified. Det er konventionen, URLSearchParams producerer, og den round-tripper rent via URLSearchParams.getAll() i den modtagende ende. Hvis din server forventer firkantet-parentes-notation (tag[]=premium&tag[]=verified — almindeligt i PHP og Rails), så navngiv JSON-nøglen tag[] i stedet for tag.

Må jeg have indlejrede objekter i JSON'en?

Nej — query-strenge er flade af design. Siden returnerer en pæn fejl, hvis den ser et indlejret objekt, så du kan flade det ud. Den hyppigste workaround er nøgler med firkantet-parentes-notation: i stedet for {"filter": {"status": "active"}} skriver du {"filter[status]": "active"}. Frameworks som Rails, PHP og qs.js parser det tilbage til indlejrede objekter på serversiden. Eller bare flad det konceptuelt: {"status": "active"} hvis der ikke er nogen reel tvetydighed.

Hvad sker der med null- og undefined-værdier?

De springes over. {"customer": "Ava Chen", "status": null} giver ?customer=Ava+Chen, ikke ?customer=Ava+Chen&status=. Begrundelsen: status= i URL'en betyder "den tomme streng", det er en reel værdi og noget andet end "ingen status". At sende null som tom ville være tabsbehæftet og forvirrende. Vil du faktisk have status=, så send {"status": ""}.

Bevares tal og booleans som typer?

Nej — query-strenge bærer kun strenge. {"page": 2} bliver til page=2, og {"debug": true} bliver til debug=true. Din server-side-kode skal kende skemaet og konvertere dem tilbage. Det er grundlæggende for query-strenge (og formulardata) — wire-formatet kender ikke forskel på tallet 2 og strengen "2". Har du brug for typede parametre, så send dem i request-bodyen som JSON.

Hvordan håndteres Unicode og emoji i nøgler eller værdier?

Pænt. URLSearchParams koder bytene som UTF-8 og procent-escaper alt uden for det sikre sæt. Så {"name": "中文"} bliver til name=%E4%B8%AD%E6%96%87, og {"reaction": "🔥"} bliver til reaction=%F0%9F%94%A5. På modtagersiden afkoder URLSearchParams (eller hvilken som helst frameworks query-parser) det igen. Der er ingen kodningsindstilling at pille ved — UTF-8 er, hvad URL-standarden foreskriver.

Hvad er det indledende spørgsmålstegn til?

For at du kan indsætte outputtet direkte ovenpå en URL — https://shop.example.com/orders + ?customer=Ava+Chen&page=2 = en URL, der virker. Hænger du på en URL, der allerede har en query-streng, så drop ? og brug &. Hvis dit input er tomt eller {}, er outputtet også tomt (intet ensomt ?).

Andre URL- og JSON-værktøjer

At bygge en query-streng er én operation. Det her passer godt sammen med det: