JSON in JavaScript: JSON.stringify, JSON.parse ed errori comuni

JSON è testo, non un oggetto

JSON (JavaScript Object Notation) è un formato di testo per scambiare dati. Somiglia a un oggetto letterale JavaScript, ma è una stringa: una sequenza di caratteri che puoi inviare in rete, salvare in un file o incollare in una configurazione.

// A JavaScript object - a live value in memory.
const user = { name: "Rosa", age: 30 };

// JSON - a string of text that represents the same data.
const json = '{"name":"Rosa","age":30}';

È facile confonderli perché si somigliano. Il modello mentale che ti tiene sulla strada giusta: gli oggetti vivono nel tuo programma; JSON è l'aspetto che hanno quando escono dalla porta. Passi dall'uno all'altro con due funzioni: JSON.stringify (da oggetto a stringa) e JSON.parse (da stringa a oggetto).

JSON.stringify: da oggetto a stringa

Trasforma qualsiasi valore JavaScript nella sua rappresentazione JSON:

const user = {
  name: "Rosa",
  age: 30,
  isAdmin: false,
  tags: ["editor", "admin"],
};

const json = JSON.stringify(user);
console.log(json);
console.log(typeof json);

Il risultato è una stringa su una sola riga senza spazi: compatta, ideale da inviare in rete. Il controllo con typeof lo conferma: string, non object.

Per renderla leggibile mentre fai debug, passa due argomenti in più. Il secondo è un replacer (ci arriviamo); passare null significa "includi tutto". Il terzo è l'indentazione:

const user = {
  name: "Rosa",
  age: 30,
  tags: ["editor", "admin"],
};

console.log(JSON.stringify(user, null, 2));

È la forma standard per un output formattato. Usa 2 o 4 spazi: corrisponde a ciò che produce la maggior parte degli strumenti.

JSON.parse: da stringa a oggetto

L'operazione inversa: prendi una stringa JSON e ottieni indietro un valore JavaScript.

const json = '{"name":"Rosa","age":30,"tags":["editor","admin"]}';

const user = JSON.parse(json);
console.log(user.name);
console.log(user.tags[0]);
console.log(typeof user);

Una volta fatto il parsing, hai a che fare con un oggetto normale: accesso con il punto, con le parentesi quadre, metodi degli array, tutto quanto.

JSON.parse è pignolo. Tutti questi lanciano un SyntaxError:

JSON.parse("{name: 'Rosa'}");      // unquoted key, single quotes
JSON.parse('{"name": "Rosa",}');   // trailing comma
JSON.parse("// a comment\n{}");    // comments aren't allowed
JSON.parse("");                    // empty string

Ogni volta che l'input arriva da fuori dal tuo programma (una risposta di fetch, un file, un input dell'utente), racchiudi il parsing in un try/catch:

function safeParse(text) {
  try {
    return JSON.parse(text);
  } catch (err) {
    console.log("Invalid JSON:", err.message);
    return null;
  }
}

console.log(safeParse('{"ok":true}'));
console.log(safeParse("{ not valid }"));

Valori che non sopravvivono al viaggio di andata e ritorno

JSON supporta sei tipi di valore: stringhe, numeri, booleani, null, array e oggetti semplici. Tutto il resto in JavaScript viene eliminato, trasformato oppure genera un errore.

const weird = {
  name: "Rosa",
  greet: function () { return "hi"; },   // functions dropped
  missing: undefined,                     // undefined dropped
  when: new Date("2026-01-15"),           // Date → ISO string
  big: 10n,                               // BigInt throws!
};

// Remove `big` to see the rest:
delete weird.big;
console.log(JSON.stringify(weird, null, 2));

Cosa succede:

• Le funzioni e undefined vengono rimossi in silenzio dagli oggetti. Dentro gli array diventano null: in JSON gli array non possono avere buchi.
• Gli oggetti Date vengono serializzati come stringa ISO tramite il loro metodo toJSON. Il parsing ti restituisce la stringa, non una Date.
• BigInt lancia un TypeError. I numeri JSON non hanno un equivalente.
• Map, Set e i riferimenti circolari non funzionano nemmeno loro senza interventi.

La soluzione per il viaggio di andata e ritorno delle Date è la funzione reviver di JSON.parse:

const json = '{"name":"Rosa","joined":"2026-01-15T10:30:00.000Z"}';

const isoDate = /^\d{4}-\d{2}-\d{2}T/;
const user = JSON.parse(json, (key, value) => {
  if (typeof value === "string" && isoDate.test(value)) {
    return new Date(value);
  }
  return value;
});

console.log(user.joined instanceof Date);
console.log(user.joined.getFullYear());

Il reviver viene eseguito per ogni coppia chiave/valore e ti permette di trasformare i valori in entrata.

Il replacer: filtrare cosa viene serializzato

Il secondo argomento di JSON.stringify ti permette di controllare cosa finisce nell'output. Passa un array di chiavi per includere solo quelle:

const user = {
  name: "Rosa",
  email: "rosa@example.com",
  passwordHash: "a1b2c3...",
  age: 30,
};

// Only include safe fields.
const safe = JSON.stringify(user, ["name", "age"], 2);
console.log(safe);

Oppure passa una funzione per una logica qualsiasi: eliminare campi, mascherare valori, trasformarli al volo.

const user = {
  name: "Rosa",
  email: "rosa@example.com",
  passwordHash: "a1b2c3d4e5f6",
};

const masked = JSON.stringify(user, (key, value) => {
  if (key === "passwordHash") return undefined;       // drop the field
  if (key === "email") return value.replace(/(?<=.).(?=.*@)/g, "*");
  return value;
}, 2);

console.log(masked);

Restituire undefined rimuove la chiave. Restituire qualsiasi altro valore la sostituisce.

Personalizzare con toJSON

Se un oggetto ha un metodo toJSON, JSON.stringify lo chiama e serializza il valore restituito al suo posto. È così che Date controlla il proprio formato, e puoi usare lo stesso aggancio:

class User {
  constructor(name, passwordHash) {
    this.name = name;
    this.passwordHash = passwordHash;
  }
  toJSON() {
    // Non esporre mai l'hash.
    return { name: this.name };
  }
}

const rosa = new User("Rosa", "a1b2c3");
console.log(JSON.stringify(rosa));

Ottimo per le classi che vogliono una forma pubblica coerente, indipendentemente da chi le serializza.

Copia profonda (il vecchio trucco e quello migliore)

Per anni, JSON.parse(JSON.stringify(obj)) è stato il modo in una riga per fare una copia profonda di un oggetto semplice:

const original = { user: { name: "Rosa", tags: ["admin"] } };
const copy = JSON.parse(JSON.stringify(original));

copy.user.tags.push("editor");
console.log(original.user.tags);   // unchanged
console.log(copy.user.tags);

Funziona, a patto che l'oggetto contenga solo valori compatibili con JSON. Date, Map e funzioni lo rompono tutte (vedi i problemi del viaggio di andata e ritorno qui sopra).

Il JavaScript moderno ha structuredClone, che gestisce Date, Map, Set, typed array e riferimenti circolari:

const original = {
  user: { name: "Rosa" },
  joined: new Date(),
  tags: new Set(["admin"]),
};

const copy = structuredClone(original);
console.log(copy.joined instanceof Date);
console.log(copy.tags instanceof Set);

Usa structuredClone quando puoi. Tieni il trucco JSON.parse(JSON.stringify(...)) di riserva per copie veloci di dati semplici.

Un esempio realistico: fetch e parsing

Il posto in cui toccherai JSON più spesso è HTTP. fetch non fa il parsing del JSON al posto tuo: chiami .json() sulla risposta (che in pratica è JSON.parse sul corpo della risposta):

async function loadUser(id) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const user = await res.json();
  return user;
}

loadUser(1).then((user) => {
  console.log(user.name, "-", user.email);
});

Inviare JSON è l'operazione inversa: applica JSON.stringify al corpo e imposta l'header Content-Type.

await fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Rosa", age: 30 }),
});

Questi due schemi coprono la stragrande maggioranza del lavoro reale con JSON.

Prossimo passo: optional chaining

Il JSON ricevuto ha spesso campi facoltativi: uno user.address.city che potrebbe non esistere, un response.data.items che potrebbe mancare. Accedere a proprietà profondamente annidate senza far crashare tutto è il compito dell'optional chaining (?.), l'argomento della prossima pagina.