Vai al contenuto

Formattatore JSON: Abbellisci e Convalida JSON Online Gratuitamente

Formatta istantaneamente JSON minimizzato con rientro corretto. Formattatore JSON online gratuito che convalida la sintassi, abbellisce il codice e velocizza il debug. Funziona nel browser con formattazione in tempo reale.

Formattatore JSON

Formatta e abbellisci il tuo JSON con questo semplice strumento - la formattazione avviene automaticamente mentre digiti!

Il JSON formattato apparirà qui automaticamente...

Calcolatore di caricamento...
📚

Documentazione

Che cos'è un formattatore JSON?

Un formattatore JSON è uno strumento che prende un testo JSON (JavaScript Object Notation) e lo riscrive con rientri e interruzioni di riga, senza modificare i dati. JSON è un formato di testo semplice per memorizzare e inviare dati strutturati, costruito con coppie nome/valore ed elenchi. I programmi di solito risparmiano spazio eliminando ogni spazio vuoto superfluo, ottenendo una sola riga compatta difficile da leggere per una persona. Un formattatore, detto anche beautifier o pretty printer, reinserisce quegli spazi in modo coerente così che la struttura sia visibile. Questo strumento formatta il JSON automaticamente mentre lo si digita o lo si incolla, senza pulsanti da premere.

Regole di sintassi JSON

JSON è definito da una specifica chiamata RFC 8259. Prevede due tipi di contenitore:

Gli oggetti contengono coppie nome/valore tra parentesi graffe:

1{"name": "John", "age": 30, "city": "New York"}
2

Gli array contengono elenchi ordinati tra parentesi quadre:

1["apple", "banana", "cherry"]
2

Un valore in JSON deve essere di uno dei sei tipi: una stringa, un numero, un booleano (true o false), null, un oggetto o un array.

Poche regole causano la maggior parte degli errori:

  • I nomi delle proprietà devono essere racchiusi tra virgolette doppie. {name: "John"} non è valido; deve essere {"name": "John"}.
  • Le stringhe devono usare le virgolette doppie, non quelle singole.
  • Dopo l'ultimo elemento di un oggetto o di un array non può esserci una virgola (niente virgole finali).
  • JSON non prevede una sintassi per i commenti, anche se il suo aspetto fatto di graffe e parentesi deriva da JavaScript.
  • JSON non ha undefined. Per un valore mancante si usa null.

Un errore comune è incollare un letterale oggetto JavaScript invece di JSON. {name: 'John', age: undefined} è JavaScript valido ma non è JSON valido. La versione JSON è {"name": "John", "age": null}.

Come funziona questo formattatore JSON

Molti formattatori JSON passano il testo a JSON.parse() per costruire un oggetto JavaScript, poi eseguono JSON.stringify() per riconvertirlo in testo con gli spazi. Questo passaggio ha un effetto collaterale: i numeri JavaScript sono numeri a virgola mobile IEEE 754 a doppia precisione, che non possono rappresentare esattamente ogni intero oltre 2^53 − 1 (9,007,199,254,740,991). Un ID come 9007199254740993 può uscire come 9007199254740992 dopo questo passaggio.

Questo strumento evita quel passaggio. Legge l'input carattere per carattere con un piccolo parser scritto a mano e, invece di convertire ogni numero o stringa in un valore JavaScript, ne copia il testo esattamente com'è scritto, collocandolo poi al livello di rientro corretto. Poiché i numeri non vengono mai convertiti in virgola mobile, gli interi di qualsiasi dimensione conservano le loro cifre esatte. Se un oggetto ha la stessa chiave scritta due volte, entrambe le copie restano al loro posto invece di essere ridotte all'ultima, come accadrebbe costruendo un oggetto JavaScript.

Il procedimento, passo dopo passo:

  1. Leggere il token successivo (un oggetto, un array, una stringa, un numero, true, false o null).
  2. Verificarlo rispetto alla grammatica JSON. Rifiutarlo se viola una regola, ad esempio una chiave senza virgolette o una virgola finale.
  3. Copiare il testo del token invariato nell'output.
  4. Aggiungere un'interruzione di riga e un rientro di 2 spazi per ogni livello di annidamento all'interno di un oggetto o di un array.
  5. Ripetere finché tutto l'input non è stato letto.

Il rientro è fissato a 2 spazi; non esiste un'impostazione per modificarlo. Se l'input è vuoto, non viene mostrato nulla. Se l'input viola una regola JSON, lo strumento mostra il messaggio «Invalid JSON: Please check your input» anziché un messaggio tecnico del parser con la posizione esatta del carattere. Il JSON.parse() integrato nei browser, invece, indica una posizione del carattere nel testo dell'errore.

Esempio svolto

Questo input minificato:

1{"name":"John Doe","age":30,"address":{"street":"123 Main St","city":"Anytown","state":"CA"},"hobbies":["reading","hiking","photography"]}
2

diventa:

1{
2  "name": "John Doe",
3  "age": 30,
4  "address": {
5    "street": "123 Main St",
6    "city": "Anytown",
7    "state": "CA"
8  },
9  "hobbies": [
10    "reading",
11    "hiking",
12    "photography"
13  ]
14}
15

Ogni oggetto o array annidato ha un rientro di un livello in più rispetto al suo genitore, quindi il rapporto tra address e i suoi tre campi è visibile a colpo d'occhio.

Un secondo esempio mostra perché copiare i letterali è importante. Questo input:

1{"id":9007199254740993}
2

viene formattato come:

1{
2  "id": 9007199254740993
3}
4

Le cifre restano esattamente come sono state digitate. Un formattatore basato su JSON.parse() seguito da JSON.stringify() trasformerebbe invece silenziosamente quel numero in 9007199254740992.

Errori JSON comuni

  • Nome di proprietà senza virgolette: {name: "John"}. Correzione: {"name": "John"}.
  • Virgola finale: {"age": 30,}. Correzione: rimuovere la virgola prima della graffa di chiusura.
  • Parentesi non corrispondenti: {"data": [1, 2}. Correzione: chiudere l'array con ] prima di chiudere l'oggetto.
  • Stringa non chiusa: {"name": "John}. Correzione: aggiungere le virgolette di chiusura mancanti.
  • Virgolette singole: {'name': 'John'}. Correzione: usare le virgolette doppie.
  • undefined, NaN o Infinity: nessuno di questi è un valore JSON valido. Usare null o una stringa.

Una fonte frequente di questi errori è copiare un oggetto direttamente dalla console di un browser o da un log del server, che spesso include una sintassi esclusiva di JavaScript da ripulire prima che sia JSON valido.

Quando usare un formattatore JSON

I formattatori JSON si usano soprattutto per ispezionare le risposte delle API, che di solito vengono inviate minificate per risparmiare banda. Si usano anche per controllare a mano file di configurazione come package.json o tsconfig.json, per leggere dati copiati dal local storage o dalla console di un browser e per capire la struttura di un insieme di dati ricevuto da un altro sistema.

Altri modi per formattare JSON

  • Strumenti per sviluppatori del browser: Chrome, Edge e Firefox formattano automaticamente le risposte JSON nel riquadro di anteprima della scheda Rete.
  • Editor di codice: Visual Studio Code formatta un file JSON aperto con Maiusc+Alt+F su Windows, Maiusc+Opzione+F su Mac o Ctrl+Maiusc+I su Linux. La maggior parte degli editor ha una scorciatoia equivalente o un'estensione di formattazione.
  • Riga di comando: jq (jq . file.json) e il modulo integrato di Python python -m json.tool file.json formattano entrambi il JSON da un terminale.

Integrare la formattazione JSON nel codice

La maggior parte dei linguaggi di programmazione include una libreria JSON con un'opzione di rientro. In JavaScript:

1const formatted = JSON.stringify(JSON.parse(rawJson), null, 2);
2

In Python:

1import json
2formatted = json.dumps(json.loads(raw_json), indent=2)
3

Entrambi gli approcci interpretano il testo in una struttura dati nativa e poi lo serializzano di nuovo con gli spazi. Come mostrato sopra, è semplice da scrivere ma può alterare gli interi grandi, perché per impostazione predefinita entrambi i linguaggi memorizzano i numeri come double. Le applicazioni che richiedono interi grandi esatti, come gli ID dei database, di solito li memorizzano in JSON come stringhe anziché come numeri.

Una breve storia di JSON

Douglas Crockford specificò JSON all'inizio degli anni 2000, ricavandone la sintassi dai letterali oggetto di JavaScript ma rendendolo utilizzabile da qualsiasi linguaggio. La RFC 4627 lo formalizzò nel 2006. Si diffuse rapidamente perché era più breve da scrivere di XML e corrispondeva direttamente agli oggetti JavaScript, un aspetto importante quando le applicazioni web iniziarono a recuperare dati in background invece di ricaricare intere pagine. Negli anni 2010 era ormai ampiamente usato dalle API web.

Domande frequenti

Che cos'è un formattatore JSON? Uno strumento che aggiunge rientri, interruzioni di riga e spaziatura al testo JSON in modo che la sua struttura sia facile da leggere, senza modificare i dati.

La formattazione modifica i dati? No. La formattazione modifica solo gli spazi vuoti. Questo strumento copia ogni stringa e ogni numero esattamente come digitato, quindi i valori nell'output formattato coincidono con l'input con precisione, compresi i numeri troppo grandi per essere memorizzati esattamente come numero JavaScript.

Perché compare l'errore «Invalid JSON»? L'input viola una regola JSON. Le cause comuni sono nomi di proprietà senza virgolette, una virgola finale, virgolette singole, una stringa non chiusa o una parentesi non corrispondente. Questo strumento non mostra la posizione esatta del carattere del problema; confrontare l'input con le regole elencate sopra di solito lo individua rapidamente.

Il JSON può avere commenti? No. La specifica non li consente. Formati come JSONC e JSON5 aggiungono il supporto ai commenti alla sintassi JSON per i casi in cui è utile, come i file di configurazione.

Qual è il rientro standard in JSON? Due spazi sono una convenzione comune ed è quella usata da questo strumento. Alcune guide di stile usano invece quattro spazi o tabulazioni; la specifica JSON in sé non richiede alcun rientro particolare.

Qual è la differenza tra JSON.parse() e JSON.stringify()? JSON.parse() trasforma una stringa JSON in un valore JavaScript. JSON.stringify() fa l'opposto, trasformando un valore JavaScript in una stringa JSON, e accetta un argomento di rientro per la formattazione leggibile. Questo strumento non usa internamente nessuna delle due funzioni, ed è ciò che gli permette di conservare esattamente gli interi grandi.

Riferimenti

  1. Internet Engineering Task Force. RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format. RFC 8259 — un valore JSON è un oggetto, un array, un numero, una stringa, true, false o null; tra i token sono ammessi solo spazi vuoti.
  2. Mozilla Developer Network. JSON.parse(). Riferimento di JSON.parse() — array e oggetti non possono avere virgole finali; il messaggio di errore indica una posizione.
  3. Mozilla Developer Network. Number.MAX_SAFE_INTEGER. Riferimento di Number.MAX_SAFE_INTEGER — il più grande intero sicuro è 2^53 − 1 = 9,007,199,254,740,991.
  4. Internet Engineering Task Force. RFC 4627: The application/json Media Type for JavaScript Object Notation (JSON). RFC 4627 — prima RFC su JSON, di D. Crockford, luglio 2006.
  5. Microsoft. Editing JSON with Visual Studio Code. Documentazione JSON di VS Code — la scorciatoia Formatta documento su ciascuna piattaforma.
  6. Python Software Foundation. json — JSON encoder and decoder. Documentazione json di Python — python -m json.tool formatta il JSON dalla riga di comando.