Formatador JSON: Embell·lir i Validar JSON en Línia Gratuït

Q: Quina diferència hi ha entre JSON.parse() i JSON.stringify()?

JSON.parse() converteix una cadena JSON en un valor JavaScript. JSON.stringify() fa el contrari: converteix un valor JavaScript en una cadena JSON i accepta un argument de sagnat per a la impressió bonica. Aquesta eina no utilitza cap de les dues funcions internament, cosa que li permet conservar exactament els enters grans.

Què és un formatador JSON?

Un formatador JSON és una eina que pren text JSON (JavaScript Object Notation) i el reescriu amb sagnat i salts de línia, sense canviar les dades. JSON és un format de text pla per emmagatzemar i enviar dades estructurades, basat en parelles nom/valor i llistes. Els programes solen estalviar espai eliminant tots els espais en blanc sobrants, cosa que produeix una única línia compacta difícil de llegir per a una persona. Un formatador, també anomenat eina d’embelliment o d’impressió amb format, torna a afegir aquests espais en blanc de manera coherent perquè l’estructura sigui visible. Aquesta eina formatarà el JSON automàticament mentre s’escriu o s’enganxa. No hi ha cap botó de format: la sortida s’actualitza a cada pulsació de tecla. Un botó de restabliment esborra l’entrada i un botó de còpia copia el resultat formatat.

Regles de sintaxi de JSON

JSON està definit per una especificació anomenada RFC 8259. Té dos tipus de contenidors:

Els objectes contenen parelles nom/valor entre claus:

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

Les matrius contenen llistes ordenades dins de claudàtors:

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

Un valor JSON ha de ser d’un dels sis tipus següents: una cadena, un nombre, un booleà (true o false), null, un objecte o una matriu.

Unes quantes regles causen la majoria dels errors:

Els noms de propietat han d’anar entre cometes dobles. {name: "John"} no és vàlid; ha de ser {"name": "John"}.
Les cadenes han d’utilitzar cometes dobles, no cometes simples.
No pot haver-hi cap coma després de l’últim element d’un objecte o una matriu (no s’admeten comes finals).
JSON no té sintaxi per als comentaris, tot i que el seu aspecte amb claus i claudàtors prové de JavaScript.
JSON no té undefined. Utilitzeu null per a un valor absent.

Un error habitual és enganxar un literal d’objecte de JavaScript en lloc de JSON. {name: 'John', age: undefined} és JavaScript vàlid, però no és JSON vàlid. La versió JSON és {"name": "John", "age": null}.

Com funciona aquest formatador JSON

Molts formatadors JSON passen el text per JSON.parse() per construir un objecte JavaScript i després executen JSON.stringify() per convertir-lo de nou en text amb espaiat. Aquest recorregut d’anada i tornada té un efecte secundari: els nombres de JavaScript són nombres de coma flotant de doble precisió IEEE 754, que no poden representar exactament tots els enters un cop superen 2^53 − 1 (9,007,199,254,740,991). Un identificador com 9007199254740993 pot convertir-se en 9007199254740992 després d’aquest recorregut.

Aquesta eina evita aquest pas. Llegeix l’entrada caràcter per caràcter amb un petit analitzador sintàctic escrit manualment i, en lloc de convertir cada nombre o cadena en un valor JavaScript, copia exactament aquell fragment de text tal com està escrit i després el col·loca al nivell de sagnat correcte. Com que els nombres mai no es converteixen en nombres de coma flotant, els enters de qualsevol mida conserven exactament les seves xifres. Si un objecte té la mateixa clau escrita dues vegades, les dues còpies es conserven al seu lloc en lloc de reduir-se a l’última, que és el que faria la construcció d’un objecte JavaScript.

El procés, pas a pas:

Llegir el testimoni següent (un objecte, una matriu, una cadena, un nombre, true, false o null).
Comprovar-lo contra la gramàtica JSON. Rebutjar-lo si infringeix una regla, com ara una clau sense cometes o una coma final.
Copiar el text del testimoni sense canvis a la sortida.
Afegir un salt de línia i sagnar amb 2 espais per cada nivell d’imbricació dins d’un objecte o una matriu. Un objecte o una matriu buits es mantenen en una sola línia, com {} o [].
Repetir-ho fins que s’hagi llegit tota l’entrada.

El sagnat és fix, de 2 espais; no hi ha cap opció per canviar-lo. Mentre la caixa d’entrada és buida, el tauler de sortida mostra el text de marcador de posició «El JSON formatat apareixerà aquí automàticament...». Si l’entrada infringeix una regla JSON, l’eina mostra el missatge «JSON no vàlid: comproveu la vostra entrada» en lloc d’un missatge tècnic de l’analitzador amb la posició exacta del caràcter. En canvi, JSON.parse(), integrat als navegadors, sí que indica una posició de caràcter en el text de l’error.

Exemple resolt

Aquesta entrada minificada:

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

es converteix en:

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

Cada objecte o matriu imbricat té un nivell de sagnat més que el seu pare, de manera que la relació entre address i els seus tres camps es veu d’un cop d’ull.

Un segon exemple mostra per què és important copiar els literals. Aquesta entrada:

1{"id":9007199254740993}
2

es formata així:

1{
2  "id": 9007199254740993
3}
4

Les xifres es mantenen exactament tal com s’han escrit. Un formatador basat en JSON.parse() seguit de JSON.stringify() convertiria silenciosament aquest nombre en 9007199254740992.

Errors habituals de JSON

Nom de propietat sense cometes: {name: "John"}. Solució: {"name": "John"}.
Coma final: {"age": 30,}. Solució: elimineu la coma abans de la clau de tancament.
Claudàtors no coincidents: {"data": [1, 2}. Solució: tanqueu la matriu amb ] abans de tancar l’objecte.
Cadena sense tancar: {"name": "John}. Solució: afegiu la cometa de tancament que falta.
Cometes simples: {'name': 'John'}. Solució: utilitzeu cometes dobles.
undefined, NaN o Infinity: cap d’aquests no és un valor JSON vàlid. Utilitzeu null o una cadena.

Una font freqüent d’aquests errors és copiar un objecte directament de la consola del navegador o d’un registre del servidor, que sovint inclou sintaxi exclusiva de JavaScript que cal netejar abans que sigui JSON vàlid.

Quan cal utilitzar un formatador JSON

Els formatadors JSON s’utilitzen sobretot per inspeccionar respostes d’API, que normalment s’envien minificades per estalviar amplada de banda. També s’utilitzen per comprovar manualment fitxers de configuració com package.json o composer.json, llegir dades copiades de l’emmagatzematge local o la consola d’un navegador i entendre l’estructura d’un conjunt de dades rebut d’un altre sistema.

Altres maneres de formatar JSON

Eines per a desenvolupadors del navegador: Chrome, Edge i Firefox formaten automàticament les respostes JSON al tauler de previsualització de la pestanya Xarxa.
Editors de codi: Visual Studio Code formata un fitxer JSON obert amb Alt+Shift+F (Shift+Option+F en un Mac). La majoria d’editors tenen una drecera equivalent o una extensió de formatació.
Línia d’ordres: jq (jq . file.json) i python -m json.tool file.json, integrat en Python, formaten JSON des d’un terminal.

Incorporar la formatació JSON al codi

La majoria de llenguatges de programació inclouen una biblioteca JSON amb una opció de sagnat. En JavaScript:

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

En Python:

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

Tots dos enfocaments analitzen el text i el converteixen en una estructura de dades nativa, i després el tornen a serialitzar amb espaiat. És senzill d’escriure, però pot canviar els nombres. JavaScript emmagatzema tots els nombres com a nombres de doble precisió, de manera que 9007199254740993 torna com a 9007199254740992. Python conserva exactes els nombres enters, perquè els enters de Python no tenen límit de mida, però encara reescriu 1.0e2 com a 100.0 i converteix 1e999 en Infinity, que no és JSON vàlid. Les aplicacions que necessiten enters grans exactes, com els identificadors de bases de dades, sovint els emmagatzemen com a cadenes en JSON en lloc de nombres.

Una breu història de JSON

Douglas Crockford va especificar JSON a principis dels anys 2000, basant-ne la sintaxi en els literals d’objecte de JavaScript però fent-lo utilitzable des de qualsevol llenguatge. L’RFC 4627 el va formalitzar el 2006. Es va estendre ràpidament perquè era més curt d’escriure que XML i es mapejava directament als objectes JavaScript, cosa important quan les aplicacions web van començar a obtenir dades en segon pla en lloc de tornar a carregar pàgines senceres. Als anys 2010 es va convertir en el format predeterminat per a les API REST i per a bases de dades com MongoDB.

Preguntes freqüents

Què és un formatador JSON? Una eina que afegeix sagnat, salts de línia i espaiat al text JSON perquè la seva estructura sigui fàcil de llegir, sense canviar les dades.

La formatació canvia les dades? No. La formatació només canvia els espais en blanc. Aquesta eina copia cada cadena i cada nombre exactament tal com s’han escrit, de manera que els valors de la sortida formatada coincideixen exactament amb els de l’entrada, inclosos els nombres massa grans per emmagatzemar-se exactament com a nombre JavaScript.

Per què rebo un error «JSON no vàlid»? L’entrada infringeix una regla JSON. Les causes habituals són noms de propietat sense cometes, una coma final, cometes simples, una cadena sense tancar o un claudàtor que no coincideix. Aquesta eina no mostra la posició exacta del caràcter problemàtic; comprovar l’entrada segons les regles anteriors normalment permet trobar-lo ràpidament.

JSON pot contenir comentaris? No. L’especificació no els permet. Formats com JSONC i JSON5 afegeixen compatibilitat amb comentaris sobre la sintaxi JSON per als casos en què és útil, com ara els fitxers de configuració.

Quin és el sagnat JSON estàndard? Dos espais és la convenció més habitual en el desenvolupament web i és el que utilitza aquesta eina. Algunes guies d’estil utilitzen quatre espais o tabuladors; l’especificació JSON no exigeix cap sagnat concret.

Quina diferència hi ha entre JSON.parse() i JSON.stringify()? JSON.parse() converteix una cadena JSON en un valor JavaScript. JSON.stringify() fa el contrari: converteix un valor JavaScript en una cadena JSON i accepta un argument de sagnat per a la impressió bonica. Aquesta eina no utilitza cap de les dues funcions internament, cosa que li permet conservar exactament els enters grans.