Come usare JSON.parse() e JSON.stringify()

L'oggetto JSON, disponibile in tutti i browser più moderni, ha due metodi molto utili per lavorare con i contenuti in formato JSON: parse() e stringify(). Il primo prende una stringa in formato JSON e la trasforma in un oggetto JavaScript, mentre il secondo prende un oggetto JavaScript e lo trasforma in una stringa in formato JSON.

Ecco di seguito un esempio:

const persona = {
    nome: 'Pino',
    cognome: 'Pallino',
    eta: 12
};

const stringaPersona = JSON.stringify(persona);

console.log(stringaPersona);
// {"nome":"Pino","cognome":"Pallino","eta":12}

const oggettoPerosna = JSON.parse(stringaPersona);
// {nome: "Pino", cognome: "Pallino", eta: 12}cognome: "Pallino"eta: 12nome: "Pino"[[Prototype]]: Object

Oltre al classico utilizzo sugli oggetti, questi metodi possono tornare utili anche quando si lavora con gli array:

const array = ['tizio', 'caio', 'sempronio'];

const stringaArray = JSON.stringify(array);

console.log(stringaArray);
// ["tizio","caio","sempronio"]

const oggettoArray = JSON.parse(stringaArray);

console.log(oggettoArray);
// ["tizio", "caio", "sempronio"]

Metodo JSON.parse()

Il metodo JSON.parse() accetta una funzione come secondo parametro che può trasformare il valore degli oggetti prima che vengano restituiti. Nell'esempio che segue, il valore degli oggetti viene reso in maiuscolo nell'oggetto restituito dal metodo parse:

const persona = {
    nome: 'Pino',
    cognome: 'Pallino',
    eta: 12
};

const stringaPersona = JSON.stringify(persona);

JSON.parse(stringaPersona, (key, value) => {
    if (typeof value === 'string' {
        return value.toUpperCase();
	}
	return value;
});

Metodo JSON.stringify()

Il metodo JSON.stringify() accetta due parametri aggiuntivi, il primo è una funzione replacer, mentre il secondo è una stringa (String) o un numero (Number) il cui valore verrà utilizzato come spazio nella stringa restituita.

La funzione replacer può essere utilizzata per filtrare ed escludere dei valori dato che ogni valore impostato a undefined verrà escluso dalla stringa restituita.

const persona = {
    nome: 'Pino',
    cognome: 'Pallino',
    eta: 12
};

const replacer = (key, value) => {
    if (key === 'eta') {
        return undefined;
    }
    return value;
}

const stringaPersona = JSON.stringify(persona, replacer);
// {"nome":"Pinco","cognome":"Pallino"}

Ecco invece un esempio utilizzando il secondo parametro space:

const persona = {
    nome: 'Pino',
    cognome: 'Pallino',
    eta: 12
};

const stringaPersona = JSON.stringify(persona, null, '---');
// "{
// ---"nome": "Pinco",
// ---"cognome": "Pallino",
// ---"eta": 12
// }"

Conclusione

In questa guida abbiamo visto come utilizzare i metodi JSON.parse() e JSON.stringify() per lavorare con gli oggetti JSON e JavaScript.