Il compito che mi ha insegnato a rispettare l'appiattimento sembrava noioso sul biglietto: & quot; esportare l'oggetto delle impostazioni su un foglio di calcolo in modo che il client possa modificarlo.& quot; Le impostazioni erano un blob JSON profondamente annidato da una configurazione Laravel, profondo tre e quattro livelli in alcuni punti, con array di flag di funzionalità mescolati Un foglio di calcolo ha colonne, non alberi Avevo bisogno di ogni valore di foglia come un singolo tasto piatto che il client poteva vedere in una riga, modificare e restituire, e poi avevo bisogno di ricostruire l'esatta struttura annidata dalle loro modifiche senza perdere un singolo indice di array Quel viaggio di andata e ritorno, annidato in piano e piatto per annidare, è ciò che fa un flattener JSON, e ottenerlo senza perdite è l'intero gioco. Il Toolz Pialla JSON è lo strumento che ho costruito per quel lavoro, e questa guida spiega come funziona e dove ti salva.
tl; dr: Un appiattitore JSON converte un oggetto annidato in un oggetto a livello singolo le cui chiavi sono il percorso di ciascun valore, quindi
{"user":{"city":"Austin"}}diventa{"user.city":"Austin"}. Gli array si appiattiscono con il loro indice nel percorso (roles.0). Unflatten lo inverte, ricostruendo gli oggetti e gli array nidificati da quei tasti tratteggiati. Lo strumento Toolz esegue entrambe le direzioni senza perdite, preserva oggetti e array vuoti, supporta la notazione dell'array di punti o parentesi e un delimitatore personalizzato ed esegue interamente lato client senza caricamento e senza registrazione.
Costruisco SaaS su Laravel e React e spedisco plugin WordPress, quindi JSON annidato è ovunque ai miei tempi: file di configurazione, payload API, cataloghi di messaggi i18n, negozi di feature-flag I sistemi che consumano quei payload, però, spesso vogliono chiavi piatte L'appiattimento è l'adattatore tra una forma che è naturale per i dati strutturati e una forma che è naturale per fogli di calcolo, variabili d'ambiente e archivi di chiavi tratteggiate È una piccola operazione che sblocca silenziosamente un sacco di compiti altrimenti fastidiosi.
Che cosa è un JSON flattener?
Un appiattitore JSON converte un oggetto JSON annidato in un oggetto a livello singolo in cui ogni chiave è il percorso completo dalla radice a un valore foglia Nemmeno la sintassi del percorso è arbitraria: RFC6901 definisce JSON Pointer, il modo standard per indirizzare un valore all'interno di un documento Il nidificato {"user":{"name":"Ada","address":{"city":"Austin"}}} diventa l'appartamento {"user.name":"Ada","user.address.city":"Austin"}. Non cambia nulla dei valori; lo fa solo il loro indirizzamento. Ogni foglia, per quanto profonda, riceve una chiave che spiega come raggiungerla.
Gli array vengono gestiti allo stesso modo, con l'indice dell'array che diventa un segmento di percorso: {"roles":["admin","editor"]} appiattisce a {"roles.0":"admin","roles.1":"editor"}. L'indice nella chiave è ciò che consente all'operazione inversa di ricostruire l'array nell'ordine corretto. Quell'operazione inversa, non appiattita, prende un oggetto piatto di chiavi tratteggiate e ricostruisce gli oggetti e gli array nidificati, decidendo ad ogni passaggio se un segmento di percorso nomina una proprietà dell'oggetto o un indice di array. Quando appiattiti e non appiattiti utilizzano la stessa notazione di delimitatore e array, sono inversi esatti e quel viaggio di andata e ritorno senza perdite è la proprietà che rende lo strumento affidabile per il lavoro reale piuttosto che per una comodità unidirezionale.
Perché dovrei appiattire JSON in primo luogo?
Perché un sacco di sistemi parlano solo coppie chiave-valore piatto, e un percorso tratteggiato è il modo standard per portare struttura nidificata attraverso di loro senza perderlo L'esempio più chiaro è un foglio di calcolo Un foglio di calcolo è una griglia di colonne, e non c'è colonna per & quot; la città all'interno dell'indirizzo all'interno dell'utente.& quot; Appiattire l'oggetto e user.address.city diventa un'intestazione a colonna singola sotto la quale il valore può vivere, che è esattamente ciò di cui il mio ticket di esportazione delle impostazioni aveva bisogno.
La stessa forma si manifesta in molti altri luoghi Variabili ambientali e .env i file sono piatti e gli strumenti che mappano la configurazione su di essi utilizzano percorsi punteggiati o sottolineati Le librerie di internazionalizzazione digitano le loro stringhe con percorsi punteggiati come checkout.button.label. Le piattaforme di tipo Feature-flag, gli schemi di eventi analitici e molte pipeline di registrazione desiderano tutte un livello di chiavi, spesso in modo da poter indicizzare o interrogare ciascun campo in modo indipendente In ogni caso il nesting è reale e significativo e l'appiattimento lo preserva nel percorso anziché scartarlo Quando la rappresentazione piatta ha raggiunto il suo scopo, unflatten ricostruisce l'oggetto originale Se ti stai muovendo anche tra JSON e fogli di calcolo in modo specifico, il Convertitore CSV a JSON è il compagno naturale della tappa tabellare di quel viaggio.
Come vengono gestiti gli array durante l'appiattimento?
Gli array sono la parte che le persone sbagliano più spesso, quindi vale la pena essere precisi Un elemento dell'array viene appiattito utilizzando il suo indice numerico come segmento di percorso, che preserva l'ordine e consente di ricostruire esattamente l'array Lo strumento Toolz offre due notazioni per quell'indice e codificano le stesse informazioni con sintassi diversa.
| Ingresso | Notazione punti | Notazione staffa |
|---|---|---|
{"roles":["admin","editor"]} |
roles.0, roles.1 |
roles[0], roles[1] |
{"items":[{"id":1}]} |
items.0.id |
items[0].id |
{"matrix":[[1,2]]} |
matrix.0.0 |
matrix[0][0] |
Scrive la notazione a punti roles.0, che è compatto e corrisponde a quanti sistemi config e i18n codificano i loro valori Scrive la notazione a parentesi roles[0], che rispecchia la sintassi di accesso JavaScript e lo stile del percorso utilizzato da alcuni linguaggi di query Nessuno dei due è più corretto; scegli quello che il sistema dall'altra parte si aspetta La cosa importante è la coerenza: qualunque notazione con cui appiattisci, usa la stessa per sgonfiare, perché è così che lo strumento conosce un segmento numerico significa & quot; indice e quot dell'array; piuttosto che & quot; un tasto oggetto che sembra essere un numero.& quot; L'appiattitore Toolz imposta per impostazione predefinita la notazione dei punti e ti consente di passare alla parentesi con un clic.
Come faccio a usare l'appiattitore JSON?
Il flusso ha due direzioni e un paio di opzioni Inizia scegliendo appiattisci o desquama con la levetta in alto Flatten prende JSON annidato e produce tasti puntati; unflatten prende i tasti puntati e ricostruisce la struttura annidata Carica campione riempie un esempio lavorato per qualunque direzione ti trovi, in modo da poter vedere la forma sia dell'input che dell'output prima di incollare i tuoi dati.
Incolla il tuo JSON nella casella di input Per flatten, cioè un oggetto annidato; per unflatten, è un oggetto piatto i cui tasti sono percorsi punteggiati L'input deve essere JSON valido e, in caso contrario, lo strumento riporta il messaggio parser's e la posizione del problema invece di consegnarti un output vuoto, quindi una virgola finale vagante è veloce da trovare Imposta lo stile della chiave: il delimitatore predefinito su un punto e può essere modificato quando le tue chiavi contengono già punti e la notazione dell'array passa da un punto all'altro roles.0 e roles[0]. Mantenere quelle due impostazioni identiche su un appiattimento e la sua corrispondenza non appiattita in modo che il viaggio di andata e ritorno si allinei Fare clic sul pulsante di azione, controllare il conteggio dei tasti che conferma quante foglie sono state prodotte e copiare l'output o scaricarlo come a .json file. Il tutto viene eseguito nell'istante in cui fai clic, nel tuo browser, senza che nulla venga inviato da nessuna parte.
L'appiattimento è senza perdite e quali sono i casi limite?
Per lo strumento Toolz, sì, con una custodia per bordi che vale la pena conoscere Scalari, null, booleani, e i numeri sopravvivono intatti La parte sottile sono contenitori vuoti: un oggetto vuoto {} o un array vuoto [] viene conservato come valore foglia anziché essere eliminato silenziosamente, quindi una configurazione che si basa su un elenco vuoto fa ancora viaggi di andata e ritorno esattamente a quello che era Molti appiattitori ingenui perdono contenitori vuoti, il che cambia silenziosamente il significato di un documento, quindi questa è una scelta deliberata.
L'unica limitazione autentica sono le chiavi che contengono già il delimitatore. Se i tuoi dati hanno una chiave oggetto con un punto letterale al loro interno, come {"a.b":1}, e ti appiattisci con un delimitatore di punti, il percorso diventa ambiguo: unflatten non può dire se a.b era una chiave o annidata a poi b. La correzione consiste nel cambiare il delimitatore in un carattere che non appare nelle chiavi, come una barra o una pipe, e utilizzare lo stesso delimitatore per entrambe le direzioni È la stessa classe di problema di fuga che si vede quando I delimitatori CSV si scontrano con i dati, e vale la stessa soluzione: scegli un separatore che i tuoi valori non contengono All'esterno di quel caso, un appiattimento seguito da un desquamazione con impostazioni corrispondenti riproduce esattamente il documento originale, array e contenitori vuoti inclusi.
Qual è la differenza tra appiattimento e conversione in un altro formato?
L'appiattimento non è una conversione di formato; è una ristrutturazione all'interno di JSON L'output di un appiattimento è ancora JSON, solo con un singolo livello di tasti puntati invece di annidarsi. Questo è diverso dai convertitori che trasformano JSON in una serializzazione veramente diversa e sapere quale ti serve salva un passaggio.
Se si desidera che gli stessi dati siano espressi come YAML per un file di configurazione, il Convertitore JSON a YAML è lo strumento, perché cambia la sintassi piuttosto che la forma Se si desidera un'interfaccia TypeScript che descrive la struttura in modo che il front-end sappia cosa sta gestendo, il Convertitore da JSON a TypeScript lo deduce da un campione Se si desidera un contratto formale per la convalida, il Generatore di schemi JSON deriva uno Schema JSON da un esempio L'appiattimento si trova accanto a questi piuttosto che sostituirli: si appiattisce quando un sistema downstream vuole un livello di chiavi, e si converte quando un sistema vuole una lingua diversa Faccio spesso entrambe le cose in sequenza, appiattendo un payload per modificarlo come colonne e poi, separatamente, generando tipi per la versione nidificata che consegno a React Per una stampa graziosa o la convalida del JSON in qualsiasi punto di quella catena, il Formattatore JSON è l'utilità che tengo aperta nella scheda successiva.
Come decide unflatten tra un array e un oggetto?
Questo è il meccanismo che fa funzionare il viaggio di andata e ritorno e la sua comprensione spiega sia il valore predefinito dello strumento' che il suo unico bordo tagliente. Quando non appiattito si legge un tasto come user.roles.0, lo divide nei segmenti user, roles, e 0, poi li cammina costruendo struttura come va Ad ogni passo guarda il segmento successivo per decidere che tipo di contenitore creare Se il segmento successivo è un intero non negativo, fa un array; se è qualsiasi altra cosa, fa un oggetto Così roles.0 dice allo strumento che roles dovrebbe essere un array il cui primo elemento è il valore, mentre address.city lo dice address dovrebbe essere un oggetto con un city proprietà.
Quella singola regola, & quot; segmento intero significa indice di array, & quot; è il motivo per cui un appiattimento e un unflatten con impostazioni corrispondenti riproducono gli array esattamente È anche il motivo per cui la notazione di array scelta deve essere coerente Nella notazione a punti l'indice di array e una chiave di oggetto sono entrambi solo testo tra punti, quindi lo strumento si basa interamente sul test dei numeri interi Nella notazione tra parentesi il [0] la sintassi rende esplicito l'intento prima ancora che avvenga la scissione, O funziona, ma mescolandoli, appiattindo con parentesi e sgonfiando con punti, si interrompe il segnale da cui dipende lo strumento.
Ecco il bordo tagliente che segue dalla regola: un oggetto le cui chiavi sono veramente le corde "0", "1", "2" è indistinguibile, una volta appiattito, da un array Entrambi producono i tasti 0, 1, 2, e unflatten li ricostruirà come un array perché questo è il caso estremamente comune Se hai veramente bisogno di un oggetto con tasti stringa numerici per sopravvivere al viaggio di andata e ritorno, questa è l'unica situazione in cui appiattimento e unflattening non ti restituirà il tipo esatto, e faresti meglio a mantenere quell'oggetto annidato o utilizzando uno schema di chiavi non numeriche In anni di questo ho colpito quel caso esattamente due volte, entrambe le volte in dati che probabilmente erano stati modellati in modo sbagliato per cominciare, quindi il default è il commercio giusto per quasi tutti È lo stesso tipo di decisione pragmatica dietro mantenere i numeri con zeri iniziali come stringhe nelle stringhe Convertitore CSV a JSON: lo strumento ottimizza per ciò che i dati significano quasi sempre, e documenta la rara eccezione piuttosto che rendere il percorso comune imbarazzante.
Il mio JSON è sicuro da incollare in questo strumento?
Sì, ed è architetturale piuttosto che una promessa Analisi, appiattimento, desappiattimento e serializzazione vengono eseguiti come JavaScript all'interno della scheda del browser Non c'è caricamento, nessun server di andata e ritorno e non viene registrato o archiviato nulla Apri la scheda di rete del browser's e fai clic sul pulsante di azione: nessuna richiesta viene eseguita Una volta caricata la pagina puoi disconnetterti da Internet e continua a funzionare, perché all'inizio non c'era mai un server nel ciclo.
Questo conta più di quanto potrebbe sembrare, perché i payload JSON sono esattamente il tipo di cosa che porta segreti: token API in una configurazione, dati personali in una risposta API, identificatori interni in un blob delle impostazioni Un dispositivo di appiattimento che ha caricato il tuo oggetto su un server trasformerebbe un payload privato in qualcun altro's log line L'elaborazione lato client rimuove completamente il rischio, motivo per cui è l'impostazione predefinita su ogni strumento su Toolz.dev Se vuoi il ragionamento completo, l'ho impaginato nel guida alla privacy dei dati per gli strumenti online, e il kit più ampio che uso per questo tipo di lavoro è nel mio Guida al kit per gli sviluppatori web.
Domande frequenti
Cosa significa appiattire JSON?
Flattening JSON converte un oggetto annidato in un oggetto a livello singolo le cui chiavi sono il percorso di ciascun valore Il nidificato {"user":{"city":"Austin"}} diventa l'appartamento {"user.city":"Austin"}. Ogni valore foglia ottiene una chiave tratteggiata e non rimane alcun annidamento nell'output. Unflatten inverte il processo e ricostruisce la struttura annidata.
Come vengono gestiti gli array durante l'appiattimento?
Gli elementi dell'array vengono appiattiti utilizzando il loro indice come segmento di percorso. {"roles":["admin","editor"]} diventa {"roles.0":"admin","roles.1":"editor"} in notazione scalare, o {"roles[0]":"admin","roles[1]":"editor"} nella notazione a parentesi L'indice preserva l'ordine in modo che l'array possa essere ricostruito esattamente quando si sgonfia.
Posso riaffilare i tasti tratteggiati in JSON annidato? Sì. Passa alla modalità unflatten e incolla un oggetto piatto i cui tasti sono percorsi tratteggiati Lo strumento ricostruisce gli oggetti e gli array nidificati, decidendo array rispetto a oggetto in base al fatto che ciascun segmento di percorso sia un indice intero. Flatten e unflatten sono inverse esatte quando il delimitatore e la notazione dell'array corrispondono.
Qual è la differenza tra la notazione di array di punti e parentesi?
Entrambi codificano lo stesso indice di array; differisce solo la sintassi Scrive la notazione punto items.0.id, che è compatto e comune nelle chiavi config e i18n. scrive la notazione della staffa items[0].id, che corrisponde alla sintassi di accesso JavaScript e ad alcuni linguaggi di query Scegli quello che il tuo sistema di destinazione si aspetta e usa lo stesso per entrambe le direzioni.
L'appiattimento perde dati? No. Scalari, nulli, booleani e persino oggetti vuoti e array vuoti vengono conservati come valori foglia, quindi sgonfiare il risultato riproduce il documento originale L'unica cosa da guardare sono le chiavi che contengono già il proprio delimitatore, motivo per cui il separatore è configurabile.
Perché dovrei appiattire JSON? L'appiattimento adatta i dati nidificati ai sistemi che prevedono un livello di chiavi: colonne di fogli di calcolo, variabili di ambiente, chiavi di traduzione tratteggiate, archivi di flag di funzionalità e molte pipeline di analisi e registrazione Il percorso tratteggiato trasporta la struttura originale attraverso un formato piatto in modo che nulla vada perso.
Cosa succede se una chiave contiene già un punto? Un punto letterale all'interno di un tasto è ambiguo con il separatore di percorso, quindi il viaggio di andata e ritorno può dividerlo nel posto sbagliato Cambia il delimitatore in un carattere che non appare nelle tue chiavi, come una barra o un tubo, e usa quello stesso delimitatore sia per appiattire che per non appiattire.
Il mio JSON è stato caricato da qualche parte? No. L'analisi e la trasformazione vengono eseguite come JavaScript nel browser Non viene trasmesso, registrato o archiviato nulla È possibile confermarlo guardando la scheda di rete mentre si appiattisce o andando offline, poiché lo strumento continua a funzionare senza connessione.
