Un tutorial sull'uso di JSON.parse() e JSON.stringify()

Hark Labs2022-04-28 · 5 min read

Un tutorial sull'uso di JSON.parse() e JSON.stringify()

JSON sta per JavaScript Object Notation. Viene utilizzato per descrivere JavaScript oggetti. Si tratta di un formato di condivisione dei dati che specifica i valori dei dati utilizzando coppie chiave-valore. L'oggetto JSON è supportato da tutti i principali browser. Questo tutorial richiede che tu abbia familiarità con JavaScript e con l'uso dell'oggetto JSON. Per familiarizzare con JSON, puoi dare un'occhiata alla nostra panoramica del formato di condivisione dei dati JSON. Puoi anche scoprire come lavorare con JSON in JavaScript.

Il formato JSON viene utilizzato anche per trasmettere dati attraverso la rete. A questo scopo, i dati devono essere serializzati e deserializzati. Quando i dati sono in formato JSON, vengono convertiti in una stringa utilizzando il metodo stringify. Per riconvertire i dati nel formato oggetto per la manipolazione, viene utilizzato il metodo parse. Questo tutorial andrà a esaminare i passaggi per l'utilizzo di JSON.parse() e JSON.stringify(). Cominciamo!

JSON.parse()

Questo metodo viene utilizzato per convertire una stringa JSON in un oggetto JSON in modo che possa essere manipolato a livello di programmazione. La stringa passata deve essere una stringa JSON valida, altrimenti verrà generata un'eccezione. Questa stringa può essere ricevuta da qualsiasi servizio web o applicazione remota.

Questo metodo accetta due parametri: una stringa e una funzione di callback che può essere utilizzata per manipolare la stringa prima di convertirla in un oggetto. Supponiamo di ricevere un messaggio da un servizio web che indica lo stato dell'azione, il messaggio e il codice di stato. Di seguito è riportato un semplice esempio di come una stringa possa essere convertita in un oggetto.

Codice:

let json_string = '{"message":"Done with success", "status":200, "code":200}'
let server_obj = JSON.parse(json_string);
console.log(server_obj)

let json_string = '{"message":"Done with success", "status":200, "code":200}'

let server_obj = JSON.parse(json_string);

console.log(server_obj)

Output:

{message: 'Done with success', status: 200, code: 200}

1	{message: 'Done with success', status: 200, code: 200}

Un problema comune si verifica quando vengono aggiunte virgole finali alla stringa, quindi JSON.parse() genera un errore se la stringa passata presenta virgole finali. Se hai bisogno di manipolare i valori, puoi passare la funzione di callback come secondo argomento.

Codice:

let string = '{"name":"XYZ","email":"xyz@example.com"}';
let obj = JSON.parse(string, (key, value) => {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
return value;
});

console.log(obj)

let string = '{"name":"XYZ","email":"xyz@example.com"}';

let obj = JSON.parse(string, (key, value) => {

if (typeof value === 'string') {

return value.toUpperCase();

}

return value;

});

console.log(obj)

Output:

{name: 'XYZ', email: 'XYZ@EXAMPLE.COM'}

1	{name: 'XYZ', email: 'XYZ@EXAMPLE.COM'}

JSON.stringify()

Il metodo stringify fa esattamente l'opposto del metodo parse. In questo caso, viene passato l'oggetto JSON e il valore restituito è una stringa. Questa stringa può essere passata, ad esempio, a qualche altro servizio web remoto e quindi analizzata nuovamente in un oggetto JSON per la manipolazione.

Codice:

let obj = {message:"Done with success", status:200, code:200}
let str = JSON.stringify(obj);
console.log(str);

let obj = {message:"Done with success", status:200, code:200}

let str = JSON.stringify(obj);

console.log(str);

Output:

{"message":"Done with success","status":200,"code":200}

1	{"message":"Done with success","status":200,"code":200}

Il metodo stringify può accettare due argomenti: i metodi replacer e spacer. Il metodo replacer può essere utilizzato per sostituire o escludere qualsiasi valore nella stringa.

Codice:

let obj = {message:"Done with success", status:200, code:200}
let str = JSON.stringify(obj, (key, value) => {
    if (status === 200) {
        return undefined;
    }
    return value;
});

console.log(str)

let obj = {message:"Done with success", status:200, code:200}

let str = JSON.stringify(obj, (key, value) => {

if (status === 200) {

return undefined;

}

return value;

});

console.log(str)

Output:

{"message":"Eseguito con successo","status":200,"code":200}

1	{"message":"Eseguito con successo","status":200,"code":200}

Quando l'argomento spacer viene fornito, ogni elemento di un array o oggetto viene inserito nella sua riga e rientrato per indicare la sua profondità nella gerarchia degli oggetti e degli array. Di seguito è riportato un semplice frammento di codice che illustra questo.

Codice:

let obj = {message:"Eseguito con successo", status:200, code:200}
let str = JSON.stringify(obj, null, "---");
console.log(str)

let obj = {message:"Eseguito con successo", status:200, code:200}

let str = JSON.stringify(obj, null, "---");

console.log(str)

Output:

{
---"message": "Eseguito con successo",
---"status": 200,
---"code": 200
}

{

---"message": "Eseguito con successo",

---"status": 200,

---"code": 200

}

Conclusione

In questo tutorial, abbiamo esaminato due metodi utili per lavorare con contenuti formattati in JSON. Gli oggetti JSON sono ovunque e, quando si creano applicazioni moderne utilizzando JavaScript, questi metodi sono molto utili. Per saperne di più, dai un'occhiata ai seguenti tutorial sul nostro blog:

Buona programmazione!

Hark Labs

Autore · CloudSigma

Preslav Dobrev è un designer creativo presso CloudSigma, con un focus su un'identità aziendale coerente attraverso l'uso di canali di marketing tradizionali e innovativi. È abile nel fondere la visione artistica con il marketing strategico per creare narrazioni di brand di grande impatto.

Un tutorial sull'uso di JSON.parse() e JSON.stringify()

JSON.parse()

JSON.stringify()

Conclusione

Hark Labs

Commenti