JSON

Query String

Cosa fa JSON a Query String?

Hai messo insieme una config JSON nel codice — parametri di filtro, un payload analytics, lo state OAuth — e adesso devi attaccarla a un URL. Questa pagina si occupa di quell'ultimo tratto noioso. Incolla il JSON a sinistra, ricevi ?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2&tag=premium&tag=verified a destra, pronto per essere infilato in un link, in una chiamata fetch o in un URL di webhook. Gli array si espandono in chiavi ripetute (la convenzione che ogni server moderno capisce), i valori sono percent-encodati come si deve, e il ? iniziale è incluso così puoi incollare direttamente in un URL.

La conversione usa URLSearchParams integrato nel browser — la stessa primitiva che il tuo framework server usa per parsare la richiesta che torna. URLSearchParams produce output application/x-www-form-urlencoded seguendo lo standard URL del WHATWG, e il tuo JSON viene parsato da JSON.parse secondo l'RFC 8259. Numeri e booleani vengono convertiti in stringhe (le query string non hanno tipi), i valori null e undefined vengono saltati, e gli oggetti annidati sollevano un errore chiaro così li puoi appiattire.

Tutto gira localmente nel tuo browser — niente upload, niente andata e ritorno verso un server, niente log. Se hai il problema opposto (una query string e vuoi del JSON) usa Query String a JSON. Se vuoi smontare l'intero URL in protocollo, host, path e parte di search, la pagina URL a JSON o il Parser URL calzano meglio. Le regole di percent-encoding usate qui sono definite nell'RFC 3986 §2.1, e il modello più ampio di parsing URL è documentato nella reference dell'API URL su MDN.

Come convertire JSON in query string

Tre passi. Ognuno corrisponde a un pulsante della pagina.

Incolla l'oggetto JSON

Butta il JSON nel pannello di sinistra. Il valore di livello superiore deve essere un oggetto — array e primitivi non si mappano in modo pulito sui parametri di query. Clicca Esempio per un payload realistico di filtro e-commerce con una stringa, un numero, una chiave tra parentesi quadre e un array. Esempio:

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

Numeri e booleani vengono convertiti in stringhe (le query string non portano tipi). I valori <code>null</code> e <code>undefined</code> vengono saltati — altrimenti riempirebbero solo l'URL inutilmente.

Leggi la query string

Il pannello di destra si aggiorna mentre digiti. L'esempio sopra produce ?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2&tag=premium&tag=verified. Gli spazi diventano + (stile form-encoded — vedi le FAQ), le quadre diventano %5B/%5D, e l'array tag si espande in due parametri tag= separati.

Copia o scarica

Clicca Copia per mandare la query string negli appunti, o Scarica per salvarla come querystring.txt. Pulisci resetta il pannello di input.

Quando lo useresti davvero

Costruire URL di filtro condivisibili

La tua dashboard permette all'utente di filtrare gli ordini per cliente, stato e intervallo di date. Lo stato vive come oggetto JSON nel componente ({customer: "Marco Rivera", status: "active", date_from: "2026-04-01"}). Per rendere la vista condivisibile, lo attacchi all'URL — incolla qui il JSON, copia la query string, fatto. Vale uguale per le pagine categoria di un e-commerce, i risultati di ricerca, qualsiasi cosa con filtri che mantengono stato.

Cablare URL di callback per webhook

Stripe, GitHub e gran parte dei mittenti di webhook ti lasciano mettere metadati nella query string dell'URL di callback. Hai un oggetto JSON che descrive l'utente ({userId: "USR-1001", source: "checkout", flow: "onboarding"}) e devi attaccarlo a https://api.example.com/webhook?.... Incolla, copia, incolla — molto meglio che URL-encodare ogni valore a mano e domandarsi quali caratteri vadano scappati.

Generare URL OAuth e OpenID

Gli URL di authorize OAuth sono 8–12 parametri di query: client_id, redirect_uri, scope, state, response_type, ecc. Costruirne uno prima in JSON (per vederlo pulito) e convertirlo qui è più rapido che concatenare stringhe sperando che l'encoding sia giusto. Il parametro state spesso porta un nonce e un return-path che hanno bisogno del proprio escaping.

Costruire richieste API in client HTTP

Quando stai testando un endpoint API in cURL, Postman o un fetch() al volo, di solito hai i parametri come pezzettino JSON tirato dalla documentazione. Convertili qui, attacca all'URL, lancia la richiesta. Il filtro prodotti per l'ordine ORD-1001 {"sku": "SKU-101", "include": "variants"} diventa ?sku=SKU-101&include=variants in un solo incolla.

Domande comuni

Perché gli spazi sono codificati come + e non %20?

Perché l'output è form-encoded (application/x-www-form-urlencoded), che è quello che ogni browser manda e ogni server si aspetta in una query string. Tecnicamente l'RFC 3986 preferisce %20 nei componenti URI, ma la convenzione form-encoded col + per gli spazi è precedente all'RFC 3986 ed è quello che le query string usano dagli anni 90. Tutti i framework server moderni decodificano entrambi — Express, FastAPI, ASP.NET, Spring, Rails, Django, qualsiasi cosa. Se ti serve proprio %20, fai un .replace(/\+/g, "%20") rapido sull'output.

Come vengono codificati gli array?

Si espandono in chiavi ripetute. {"tag": ["premium", "verified"]} diventa tag=premium&tag=verified. È la convenzione prodotta da URLSearchParams, e fa round-trip pulito tramite URLSearchParams.getAll() dal lato ricevente. Se il tuo server si aspetta la notazione con quadre (tag[]=premium&tag[]=verified) — comune in PHP e Rails — chiama la chiave JSON tag[] invece di tag.

Posso avere oggetti annidati nel JSON?

No — le query string sono piatte per design. La pagina restituisce un errore chiaro se vede un oggetto annidato così puoi appiattirlo. Il workaround più comune sono le chiavi con notazione a quadre: invece di {"filter": {"status": "active"}}, scrivi {"filter[status]": "active"}. Framework come Rails, PHP e qs.js le riparsano in oggetti annidati lato server. Oppure appiattisci concettualmente: {"status": "active"} se non c'è ambiguità reale.

Cosa succede ai valori null e undefined?

Vengono saltati. {"customer": "Ava Chen", "status": null} produce ?customer=Ava+Chen, non ?customer=Ava+Chen&status=. Ragionamento: status= nell'URL significa "stringa vuota", che è un valore reale e diverso da "nessuno status". Mandare null come vuoto sarebbe lossy e confuso. Se vuoi davvero status=, manda {"status": ""}.

I numeri e i booleani conservano il tipo?

No — le query string trasportano solo stringhe. {"page": 2} diventa page=2, e {"debug": true} diventa debug=true. Il tuo codice server-side deve conoscere lo schema e riconvertirli. È intrinseco alle query string (e ai dati di form) — il formato sul filo non distingue il numero 2 dalla stringa "2". Se ti servono parametri tipizzati, mandali nel body della richiesta come JSON.

Come gestisce Unicode ed emoji nelle chiavi o nei valori?

Senza problemi. URLSearchParams codifica i byte come UTF-8 e percent-escapa tutto ciò che sta fuori dal set sicuro. Così {"name": "中文"} diventa name=%E4%B8%AD%E6%96%87, e {"reaction": "🔥"} diventa reaction=%F0%9F%94%A5. Lato ricevente, URLSearchParams (o il parser di query del framework) li decodifica indietro. Non c'è nessuna impostazione di encoding da toccare — UTF-8 è quello che lo standard URL impone.

A cosa serve il punto interrogativo iniziale?

Per poter incollare l'output direttamente su un URL — https://shop.example.com/orders + ?customer=Ava+Chen&page=2 = un URL funzionante. Se attacchi a un URL che ha già una query string, togli il ? e usa &. Se l'input è vuoto o {}, anche l'output è vuoto (niente ? da solo).

Altri strumenti URL e JSON

Costruire una query string è un'operazione sola. Ecco cosa si combina bene: