JSON

Query String

Hva gjør JSON til Query String?

Du har bygd en JSON-konfigurasjon i koden — filterparametere, en analytics-payload, en OAuth-state — og nå skal det henges på en URL. Denne siden tar seg av det kjedelige siste stykket. Lim inn JSON-en til venstre, få ?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2&tag=premium&tag=verified tilbake til høyre, klart til å slenges inn i en lenke, et fetch-kall eller en webhook-URL. Arrays utvides til gjentatte nøkler (konvensjonen som enhver moderne server forstår), verdiene prosentkodes ordentlig, og det innledende ? er med, så du kan lime rett inn i en URL.

Konverteringen bruker nettleserens innebygde URLSearchParams — den samme primitiven som server-rammeverket ditt bruker for å parse forespørselen som kommer tilbake. URLSearchParams produserer application/x-www-form-urlencoded-utdata i tråd med WHATWG URL Standard, og JSON-en din parses av JSON.parse i henhold til RFC 8259. Tall og booleans tvinges til strenger (query-strenger har ikke noe typesystem), null- og undefined-verdier hoppes over, og nestede objekter kaster en grei feil så du kan flate dem ut.

Alt kjører lokalt i nettleseren din — ingen opplasting, ingen serverrundtur, ingen logging. Har du motsatt problem (en query-streng og du vil ha JSON), bruk Query String til JSON. Vil du plukke hele URL-en fra hverandre i protokoll, host, sti og search-del, passer siden URL til JSON eller URL Parser bedre. Reglene for prosentkoding som gjelder her, er definert i RFC 3986 §2.1, og den bredere modellen for URL-parsing finner du i referansen til MDN URL API.

Slik konverterer du JSON til en query-streng

Tre steg. Hvert steg svarer til en knapp på siden.

Lim inn JSON-objektet

Slipp JSON-en inn i venstre panel. Verdien på øverste nivå må være et objekt — arrays og primitiver mappes ikke pent til query-parametere. Klikk på Eksempel for et realistisk e-handelsfilter-payload med en streng, et tall, en nøkkel i firkantparenteser og en array. Eksempel:

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

Tall og booleans tvinges til strenger (query-strenger bærer ingen typer). <code>null</code>- og <code>undefined</code>-verdier hoppes over — ellers ville de bare rote til URL-en.

Les query-strengen

Høyre panel oppdaterer seg mens du skriver. Eksemplet over gir ?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2&tag=premium&tag=verified. Mellomrom blir + (form-encoded-stil — se FAQ), firkantparenteser blir %5B/%5D, og tag-arrayen utvides til to separate tag=-parametere.

Kopier eller last ned

Klikk på Kopier for å sende query-strengen til utklippstavlen, eller på Last ned for å lagre den som querystring.txt. Tøm nullstiller inputpanelet.

Når du faktisk ville brukt dette

Bygge delbare filter-URL-er

Dashbordet ditt lar brukeren filtrere ordrer på kunde, status og datointervall. Tilstanden bor som et JSON-objekt i komponenten ({customer: "Marco Rivera", status: "active", date_from: "2026-04-01"}). For å gjøre visningen delbar henger du det på URL-en — lim inn JSON her, kopier query-strengen, ferdig. Det samme gjelder kategorisider i e-handel, søkeresultater, alt med tilstandsfulle filtre.

Sette sammen webhook-callback-URL-er

Stripe, GitHub og de fleste webhook-avsendere lar deg legge metadata i query-strengen til callback-URL-en. Du har et JSON-objekt som beskriver brukeren ({userId: "USR-1001", source: "checkout", flow: "onboarding"}) og må henge det på https://api.example.com/webhook?.... Lim inn, kopier, lim inn — mye bedre enn å URL-kode hver verdi for hånd og lure på hvilke tegn som må escapes.

Generere OAuth- og OpenID-URL-er

OAuth-authorize-URL-er er 8–12 query-parametere: client_id, redirect_uri, scope, state, response_type osv. Å bygge én i JSON først (for å se den rent) og konvertere her er raskere enn å snurre sammen strenger og håpe at kodingen ble riktig. state-parameteren bærer ofte en nonce og en return-sti som hver for seg trenger sin egen escaping.

Bygge API-forespørsler i HTTP-klienter

Når du tester et API-endepunkt i cURL, Postman eller en kjapp fetch(), har du som regel parametrene som et JSON-utdrag fra dokumentasjonen. Konverter her, heng på URL-en, fyr av kallet. Produktfilteret for ordre ORD-1001 {"sku": "SKU-101", "include": "variants"} blir ?sku=SKU-101&include=variants i én innliming.

Vanlige spørsmål

Hvorfor kodes mellomrom som + i stedet for %20?

Fordi utdataen er form-encoded (application/x-www-form-urlencoded) — det enhver nettleser sender, og det enhver server forventer i en query-streng. RFC 3986 foretrekker teknisk %20 i URI-komponenter, men form-encoded-konvensjonen med + for mellomrom er eldre enn RFC 3986 og er det query-strenger har brukt siden 90-tallet. Alle moderne server-rammeverk dekoder begge — Express, FastAPI, ASP.NET, Spring, Rails, Django, hva som helst. Trenger du absolutt %20, kjør et raskt .replace(/\+/g, "%20") på utdataen.

Hvordan kodes arrays?

De utvides til gjentatte nøkler. {"tag": ["premium", "verified"]} blir tag=premium&tag=verified. Det er konvensjonen URLSearchParams produserer, og den round-tripper rent via URLSearchParams.getAll() i den mottakende enden. Hvis serveren din forventer firkantparentes-notasjon (tag[]=premium&tag[]=verified — vanlig i PHP og Rails), så kall JSON-nøkkelen tag[] i stedet for tag.

Kan jeg ha nestede objekter i JSON-en?

Nei — query-strenger er flate av design. Siden returnerer en grei feil hvis den ser et nestet objekt, så du kan flate det ut. Den vanligste workarounden er nøkler med firkantparentes-notasjon: i stedet for {"filter": {"status": "active"}}, skriv {"filter[status]": "active"}. Rammeverk som Rails, PHP og qs.js parser det tilbake til nestede objekter på serversiden. Eller bare flat det ut konseptuelt: {"status": "active"} hvis det ikke er noen reell tvetydighet.

Hva skjer med null- og undefined-verdier?

De hoppes over. {"customer": "Ava Chen", "status": null} gir ?customer=Ava+Chen, ikke ?customer=Ava+Chen&status=. Begrunnelsen: status= i URL-en betyr "den tomme strengen", som er en reell verdi og noe annet enn "ingen status". Å sende null som tom ville vært tapsutsatt og forvirrende. Vil du virkelig ha status=, send {"status": ""}.

Beholder tall og booleans typene sine?

Nei — query-strenger bærer bare strenger. {"page": 2} blir page=2, og {"debug": true} blir debug=true. Server-side-koden din må kjenne skjemaet og konvertere dem tilbake. Det er grunnleggende for query-strenger (og skjemadata) — wire-formatet kjenner ikke forskjellen mellom tallet 2 og strengen "2". Trenger du typede parametere, send dem i request-bodyen som JSON.

Hvordan håndteres Unicode og emoji i nøkler eller verdier?

Pent. URLSearchParams koder bytene som UTF-8 og prosent-escaper alt utenfor det trygge settet. Så {"name": "中文"} blir name=%E4%B8%AD%E6%96%87, og {"reaction": "🔥"} blir reaction=%F0%9F%94%A5. På mottakersiden dekoder URLSearchParams (eller hvilket som helst rammeverks query-parser) det tilbake. Det er ingen kodings-innstilling å vri på — UTF-8 er det URL-standarden krever.

Hva er det innledende spørsmålstegnet til for?

For at du skal kunne lime utdataen rett oppå en URL — https://shop.example.com/orders + ?customer=Ava+Chen&page=2 = en URL som funker. Henger du på en URL som allerede har en query-streng, så drop ? og bruk &. Hvis input er tom eller {}, er utdataen også tom (ingen ensom ?).

Andre URL- og JSON-verktøy

Å bygge en query-streng er én operasjon. Dette passer godt sammen med det: