Ai miei giorni di WP Adminify, è arrivato un ticket di supporto che diceva semplicemente: & quot;Impostazioni importate interrotte Niente funziona.& quot; L'utente aveva modificato manualmente un file di impostazioni esportate - una virgola finale sulla riga 217 di un blob JSON di 9.000 righe - e il mio importatore ha risposto con il world' l'errore meno utile: Importazione non riuscita.
Ho scritto quel messaggio di errore. Questo è su di me.
Ci sono voluti 40 minuti di avanti e indietro per trovare una virgola che un formattatore decente avrebbe segnalato in mezzo secondo. Quel biglietto ha cambiato il modo in cui penso agli strumenti JSON e anni dopo ha plasmato il modo in cui ho costruito il Formattatore JSON Su Toolz.dev: la posizione dell'errore non è piacevole da avere. È l'intero prodotto.
Questa guida copre come formattare JSON online, perché la formattazione fallisce e le trappole sintattiche che mangiano tutti e #39; alla fine è pomeriggio, compreso il mio.
tl; dr: Per formattare JSON Online, incollalo in uno strumento lato client come il Formattatore JSON di Toolz.dev- prezza-stampa istantaneamente, contrassegna gli errori di sintassi con i numeri di riga e non carica mai i tuoi dati Se la formattazione non riesce, quasi certamente hai una virgola finale, virgolette singole o una chiave non quotata Usa il rientro a 2 spazi a meno che il tuo team non dica diversamente.
Cosa fa effettivamente "formattare JSON"?
Formattazione - stampa graziosa, se tu' ti senti fantasioso - aggiunge rientranze e interruzioni di riga in modo che la struttura diventi visibile. I dati non cambiano't cambiano di un solo bit. It's una trasformazione di presentazione, niente di più.
questo:
{"employees":[{"firstName":"John","lastName":"Doe","department":"Engineering","skills":["JavaScript","Python","Docker"]},{"firstName":"Jane","lastName":"Smith","department":"Design","skills":["Figma","CSS","Illustration"]}],"company":"Acme Corp","founded":2015}
diventa questo:
{
"employees": [
{
"firstName": "John",
"lastName": "Doe",
"department": "Engineering",
"skills": ["JavaScript", "Python", "Docker"]
},
{
"firstName": "Jane",
"lastName": "Smith",
"department": "Design",
"skills": ["Figma", "CSS", "Illustration"]
}
],
"company": "Acme Corp",
"founded": 2015
}
dati identici. Ma solo uno di loro ti consente di individuare a colpo d'occhio che Jane è nel design.
C'è un bonus a cui la maggior parte delle persone non pensa: anche la formattazione è convalida sotto mentite spoglie. Un formattatore deve analizzare il tuo documento per riformattarlo, quindi se il JSON è rotto, te lo dice un buon formattatore cui- che è il vero motivo per usarne uno invece di strizzare gli occhi.
Come si formatta JSON online in pratica?
L'intero flusso di lavoro è di circa quindici secondi:
- Copia il JSON da qualunque luogo viva - scheda Rete DevTools (fare clic con il pulsante destro del mouse su una richiesta → Risposta di copia),
curloutput, un file di registro, un messaggio lento di un collega. - Apri il Formattatore JSON. Nessuna registrazione, nessun login. si carica e incolli.
- Leggi l'output. JSON valido torna rientrato e evidenziato dalla sintassi, con sezioni pieghevoli per grandi documenti. JSON non valido riceve un errore con un numero di riga e una descrizione in inglese semplice.
- copiare o scaricare. Un clic in entrambi i casi.
Quello's it. La parte interessante è't il percorso felice - it's passo 3 quando le cose vanno male Quindi lascia che's vada storto.
Perché il mio JSON non si formatta?
Se un formattatore rifiuta il tuo JSON, il documento viola la grammatica in RFC 8259. Nella mia esperienza, sia dal mio debug che dalla creazione dello strumento, le persone incollano il loro JSON rotto in it' è quasi sempre una delle cinque cose.
1. virgole
{
"name": "Alice",
"age": 30,
}
SyntaxError: Unexpected token } in JSON at position 34
JavaScript lo consente. JSON non l'ha mai fatto. Elimina la virgola dopo l'ultimo elemento in ogni oggetto e matrice:
{
"name": "Alice",
"age": 30
}
Questa è la mia virgola di supporto. Rispettalo.
2. Citazioni singole
{ 'name': 'Alice' }
Il classico pitone raccontare. str(my_dict) produce pseudo-json con virgolette singole; json.dumps(my_dict) produce la cosa reale. Se tu' vedi citazioni singole in qualcosa che afferma di essere JSON, qualcuno ha stampato un dict invece di serializzarlo - I' ce l'ho fatta, tu' ce l'ho fatta, noi' lo farò tutti di nuovo.
{ "name": "Alice" }
3. Barre rovesciate non usciti
{ "path": "C:\new\test" }
Sembra innocuo. ma \n è una nuova riga e \t è una scheda, quindi questa viene analizzata in un percorso con interruzioni di riga effettive o fallisce completamente su sequenze come \x. I percorsi di Windows sono la vittima numero uno:
{ "path": "C:\\new\\test" }
4. Staffe non corrispondenti
{
"users": [
{"name": "Alice"},
{"name": "Bob"}
}
disperso ]. Banale qui, brutale in una configurazione annidata a sei livelli di profondità. Questa è una categoria di errori che gli esseri umani sono veramente pessimi nel trovare e che i parser trovano immediatamente: esternalizzala.
5. Valori JavaScript che non sono JSON
{ "value": undefined, "count": NaN }
undefined, NaN, e Infinity sono JavaScript, non JSON. JSON.stringify si converte tranquillamente NaN a null e gocce undefined proprietà interamente - il che significa che il bug spesso è' t nel JSON you're looking at, it's upstream in qualunque cosa l'abbia prodotto Usa null esplicitamente e controlla il tuo serializzatore.
la formattatore Cattura tutti e cinque con il numero di riga allegato. L'ultima frase è l'intero motivo per cui esiste questa categoria di strumenti.
Dovresti usare 2 spazi, 4 spazi o schede?
L'eterno dibattito, edizione JSON. Ecco il confronto onesto:
| 2 spazi | 4 spazi | linguette | |
|---|---|---|---|
| ecosiste | JavaScript/TypeScript, npm, reagire | Python, Java, .NET | Vai, un po' di codice legacy |
| nidificazione profonda | rimane sullo schermo | corre dal bordo destro | Dipende dalla larghezza della scheda |
| leggibilità del differenziale | buono | buono | buono fino a quando non è mescolato con gli spazi |
JSON.stringify arg predefinito |
2 (per convenzione) |
4 |
"\t" |
| Il mio verdetto | predefinito per JSON | Va bene se la tua squadra è in prima persona | Don't, per JSON in particolare |
la mia posizione, e morirò su questa piccola collina: 2 spazi per JSON, indipendentemente da ciò che utilizza l'altro codice. JSON nidifica più in profondità del tipico codice sorgente - le risposte API a quattro e cinque livelli di profondità sono normali - e il rientro a 4 spazi le trasforma in esercizi a scorrimento orizzontale Anche nei team con Python pesante ho impostato JSON a 2 spazi e nessuno si è mai lamentato due volte.
Qualunque cosa tu scelga, codificala in modo che il dibattito finisca:
# .editorconfig
[*.json]
indent_style = space
indent_size = 2
insert_final_newline = true
la formattatore Supporta entrambe le larghezze, quindi abbinare la convenzione del tuo progetto è un menu a discesa, non una discussione.
Che ne dici di formattare dalla riga di comando?
A volte il terminale è più vicino di una scheda del browser. Il mio utilizzo effettivo:
# jq — the standard. Install it, learn 10% of it, profit.
curl -s https://api.example.com/users | jq .
# Python — already on basically every machine
curl -s https://api.example.com/users | python -m json.tool
# Node, if you enjoy typing
node -e "console.log(JSON.stringify(JSON.parse(require('fs').readFileSync(0,'utf8')),null,2))" < data.json
Dove ognuno vince, onestamente:
- JQ per qualsiasi cosa scritta, ripetuta o piped e per estrarre campi (
jq '.data.users[].email') piuttosto che leggere interi documenti. - lo strumento del browser per una tantum, per qualsiasi cosa tu voglia esplorare con sezioni pieghevoli e per mostrare un compagno di squadra puoi condividere sullo schermo & #39; t un'espressione jq con un project manager.
- VS codice (
Shift+Alt+F) per i file JSON che vivono nel repository e sono comunque aperti.
Io uso tutti e tre al giorno. Chiunque ti dica uno sostituisce gli altri sta vendendo qualcosa.
Un'abitudine che vale la pena rubare: curl -s ... > response.json innanzi tutto, quindi formattare il file. Quando la risposta risulta essere una pagina di errore HTML che indossa a Content-Type: application/json costume - accade più di quanto ognuno di noi vorrebbe - tu'll want the original bytes, not your browser's interpretation of them.
Tre tecniche di formattazione che la maggior parte delle persone salta
Ordina le chiavi in ordine alfabetico. Diversi serializzatori emettono chiavi in diversi ordini, il che rende le differenze dei dati "stesso" come riscritture. L'ordinamento delle chiavi prima della differenza trasforma un differenziale di 300 righe nelle 2 linee che effettivamente sono cambiate. Questo si abbina magnificamente al Strumento Diff di testo quando si confrontano i payload di messa in scena e di produzione - un trucco che mi ha salvato personalmente durante almeno due incidenti.
Mantieni gli array brevi in linea. "colors": ["red", "green", "blue"] Su una riga si legge meglio di cinque righe di cerimonia. I buoni formattatori lo fanno automaticamente per array di primitive; è la differenza tra JSON formattato che puoi scremare e formattare JSON che è tecnicamente carina ma lunga 4.000 righe.
Formatta il frammento, non il file. Per un documento da 15 MB quando ti interessa solo un oggetto: copia quell'oggetto nidificato, formattalo da solo, fatto Formattare l'intero file in modo da poterne leggere 40 righe è uno sforzo sprecato, anche se se hai bisogno di tutto, uno strumento lato client lo gestisce senza una barra di avanzamento del caricamento, perché lì' non c'è caricamento.
e sapere quando no Per formattare: JSON minimizzato nei bundle di produzione e nelle risposte API dovrebbero rimanere minimizzate. La formattazione è per gli occhi, non per i fili. Se hai bisogno della direzione opposta, lo stesso strumento minimizza con un clic.
Domande frequenti
Come faccio a formattare JSON online gratuitamente?
Incolla il tuo JSON nel Formattatore JSON di Toolz.dev- si formatta istantaneamente con l'evidenziazione della sintassi e il controllo degli errori, gratuito, nessuna registrazione L'elaborazione avviene nel tuo browser, quindi nulla di ciò che incolli viene caricato da nessuna parte Quell'ultima parte conta più di & quot; free" parte se il payload contiene token o dati utente.
Perché il mio JSON non si formatta correttamente?
Il documento presenta un errore di sintassi e i principali sospetti sono virgole finali, virgolette singole, chiavi non citate, barre rovesciate non escape e parentesi non corrispondenti Un formattatore che convalida punterà alla riga esatta Se l'errore non ha senso, controlla se hai effettivamente JSON: le API adorano restituire pagine di errore HTML con un tipo di contenuto JSON.
Qual è la differenza tra formattazione e convalida JSON?
La formattazione riscrive gli spazi bianchi per la leggibilità; la convalida controlla il documento rispetto alla grammatica RFC 8259. In pratica loro' sono la stessa operazione - un formattatore deve analizzare (convalidare) prima di poter riformattare. That's perché & quot; ha vinto't format" e "it's invalid" sono la stessa diagnosi.
Dovrei usare 2 o 4 spazi per l'indentazione JSON?
Utilizza 2 spazi a meno che il tuo progetto sia già standardizzato su 4. JSON non nidifica più in profondità della maggior parte del codice sorgente e il rientro a 2 spazi mantiene le risposte API del mondo reale leggibili senza scorrimento orizzontale. Quindi blocca la scelta .editorconfig Quindi non viene mai più visualizzato nella revisione del codice.
Posso formattare JSON in codice VS senza estensione?
Sì - Shift+Alt+F (o Shift+Option+F su Mac) formatta qualsiasi file JSON con il formattatore integrato e il formato "formato su Salva" lo rende automatico. Nota che VS Own del codice settings.json è JSONC, che consente commenti: don' t lascia che ti convinca che lo faccia il normale JSON.
È sicuro incollare le risposte delle API in formattatori JSON online?
Solo in quelli lato client Un sacco di siti di formattazione PUBBLICARE il tuo input su un server, il che significa che la tua risposta API - token, e-mail, tutto - ora esiste in qualcun altro's logs. Il Formattatore Toolz.dev Esegue interamente nel tuo browser; verificalo tu stesso guardando la scheda di rete mentre incolli.
Come formatto un enorme file JSON (10 MB+)?
Gli strumenti del browser lato client gestiscono correttamente i file in questo intervallo poiché non c'è più #39; non c'è alcun passaggio di caricamento: l'incollaggio è la parte lenta. Dopo 50 MB circa, passa agli strumenti di streaming: jq sulla riga di comando, o estrai solo la sezione che ti serve e formattala. Non incollare mai file enormi in strumenti basati sul server; stai aspettando un caricamento senza alcun beneficio.
Come posso minimizzare JSON invece di formattarlo?
Stesso strumento, pulsante opposto - il Formattatore JSON Ha una modalità Minify con un clic che elimina tutti gli spazi bianchi. Minify per payload di produzione, pipeline di localStorage e log; Formato per l'uomo. I dati sono identici in entrambi i casi.
La formattazione di JSON cambia i dati?
No - la formattazione riscrive solo gli spazi bianchi, quindi le chiavi, i valori e la struttura rimangono identici nel significato Un documento formattato e la sua versione minificata vengono analizzati esattamente sullo stesso oggetto Se i tuoi dati cambiano effettivamente, hai modificato qualcosa a mano anziché limitarti alla formattazione.
Cos'è un abbellitore JSON?
It's un altro nome per un formattatore JSON - uno strumento che prende JSON minificato o disordinato e aggiunge indentazione e interruzioni di riga in modo che un essere umano possa leggerlo. & quot;Beautify," & quot;pretty-print," e & quot;format" tutti descrivono la stessa operazione. il Formattatore JSON lo fa in una pasta.
L'abitudine di quindici secondi
Formattare JSON è una piccola abilità con rendimenti fuori misura - la maggior parte di & quot; l'API è rotto& quot; i momenti sono davvero & quot; il payload è illeggibile" momenti, e quelli dissolvono il secondo la struttura diventa visibile Ottieni il ciclo pasta-formato-lettura fino a quindici secondi e un'intera categoria di attrito di debug scompare.
la Formattatore JSON su Toolz.dev È la versione di questo strumento che volevo durante quel ticket di supporto: istantaneo, preciso sugli errori e incapace di far trapelare i tuoi dati perché non li riceve mai.
Una volta che il tuo JSON è pulito, il passo successivo è solitamente spostarlo da qualche parte - in un foglio di calcolo con il Convertitore da JSON a CSV, tornare fuori da uno con il Convertitore da CSV a JSON, o in una pipeline di configurazione tramite il Condivisore di yam. Inizia con il Guida da JSON a CSV o torna al Guida completa agli strumenti JSON per la mappa completa.
Articoli correlati:
