Un tutorial su come lavorare con JSON in JavaScript

Introduzione

Ci sono molti modi in cui JSON può essere utilizzato in JavaScript. Uno dei suoi utilizzi più basilari è la memorizzazione dei dati. Puoi anche usarlo per trasferire dati tra client, tra server o da server a client. Altre applicazioni utili includono la capacità di configurare e verificare i dati, nonché di generare strutture dati.

In questo tutorial, esploreremo come puoi utilizzare JSON nei tuoi programmi JavaScript. Se hai già esperienza di programmazione con JavaScript, questo dovrebbe risultarti semplice.

Cos’è JSON?

JSON sta per JavaScript Object Notation. È un formato progettato per consentire la condivisione di diversi tipi di dati. JSON utilizza principalmente JavaScript come linguaggio di programmazione primario. Funziona anche con altri linguaggi come Python, PHP, Ruby, così come Java. È facile da leggere, estremamente leggero e non richiede molta formattazione. Puoi familiarizzare con la sintassi generale e la struttura del formato seguendo il nostro tutorial: Una panoramica del formato di condivisione dei dati JSON.

JSON può essere utilizzato da solo o definito in un altro formato di file. Quando è da solo, utilizza l’estensione .json . Quando si trova in un altro formato, appare come una stringa JSON tra virgolette o come un oggetto assegnato a una variabile. Ad esempio, JSON può essere utilizzato anche in formato .html . Questo formato consente di eseguire il trasferimento di dati tra il server e il browser con relativa facilità.

Il formato JSON è basato su testo. I dati chiave-valore appaiono tra parentesi graffe. Ecco come si presenta un tipico file .json :

Se hai un oggetto JSON in un file .js o .html , apparirà come una variabile in questo modo:

In alcuni casi, potresti vederli tutti su una riga. Questo accade quando il JSON viene renderizzato come una stringa invece che come un oggetto nel file JavaScript:

Puoi convertire gli oggetti JSON in stringhe. Questo è utile quando desideri eseguire un trasferimento rapido di dati.

JSON vs Oggetto JavaScript

Come abbiamo menzionato in precedenza, JSON funziona con qualsiasi linguaggio di programmazione. Tuttavia, puoi lavorare con gli oggetti JavaScript solo utilizzando JavaScript. La sintassi in JSON e JavaScript è simile. La differenza è che negli oggetti JavaScript le chiavi non richiedono le virgolette. Inoltre, gli oggetti JavaScript possono utilizzare funzioni come valori, il che significa che sono meno limitati.

Nel seguente esempio, mostriamo l’opzione JavaScript di un utente. L’utente è Sammy Shark ed è online in questo momento:

Come puoi vedere, non ci sono virgolette intorno a chiavi come first_name, last_name, online, o full_name. Inoltre, c’è un valore di funzione inserito nell’ultima riga. Se desideri accedere ai dati sotto forma di stringa, puoi chiamare user.first_name utilizzando la notazione a punti. Se invece desideri il nome completo, utilizzerai user.full_name(), poiché si tratta di una funzione.

Come accedere ai dati JSON

Come abbiamo accennato nella sezione precedente, puoi accedere ai dati JSON in JavaScript utilizzando la notazione a punti. Prendiamo l’esempio di un oggetto JSON chiamato sammy:

La nostra notazione a punti per accedere ai valori sarà:

La variabile viene prima. Dopodiché, inseriamo un punto. Infine, indichiamo la chiave a cui vogliamo accedere.

Diciamo che vogliamo creare un alert in JavaScript che mostri il valore della chiave first_name chiave. Per farlo apparire in un pop-up, useremo la funzione JavaScript alert() in questo modo:

Un altro modo per accedere ai dati da JSON consiste nell'utilizzare la sintassi delle parentesi quadre. La chiave deve essere inserita tra virgolette doppie all'interno delle parentesi quadre. Ecco una continuazione dell'esempio precedente:

E se si lavora con elementi di array annidati? In questo caso, è necessario richiamare il numero dell'elemento nell'array. Consideriamo il seguente esempio:

Supponiamo di voler accedere alla stringa facebook. Ecco come useremo la notazione a punti per accedere a quell'elemento nell'array usando il suo numero:

Ricorda di aggiungere un punto aggiuntivo per ogni elemento annidato.

Funzioni utilizzate con JSON

Successivamente, vedremo un paio di funzioni che puoi utilizzare con JSON. Il trasferimento e la memorizzazione dei dati diventano piuttosto semplici quando puoi convertire JSON da oggetto a stringa o da stringa a oggetto. Esploreremo come convertire in stringa (stringify) e analizzare (parse) JSON in due modi diversi:

• JSON.stringify()

Le stringhe sono preferibili quando si tenta di trasferire dati in modo leggero. Ecco perché vengono utilizzate per memorizzare e trasferire dati dal client al server. Considera il seguente esempio. Diciamo che stai raccogliendo i dati delle impostazioni dell'utente su una macchina. Devi inviare queste informazioni al tuo server. Utilizzeresti una stringa a questo scopo. Successivamente potrai riconvertirla utilizzando JSON.parse() per leggerla e lavorarci.

La funzione che evidenzieremo qui è JSON.stringify(). Questa funzione converte un oggetto JSON in una stringa JSON. In questo esempio, assegneremo il nostro oggetto alla variabile obj. Lo convertiremo utilizzando la funzione  JSON.stringify(). Per fare ciò, passeremo obj alla funzione e poi assegneremo la stringa alla variabile s in questo modo:

Chiamando la variabile s si otterrà il JSON sotto forma di stringa:

• JSON.parse()

Comprendibilmente, JSON.parse() svolge la funzione opposta. Al termine del trasferimento dei dati, è necessario riconvertirli in un oggetto JSON per poterci lavorare. Un'opzione consiste nell'utilizzare la funzione eval(). Tuttavia, questo approccio non è molto sicuro. Ecco perché preferiamo utilizzare la funzione JSON.parse().

Considera ancora una volta l'esempio precedente. Passeremo la stringa s alla funzione JSON.parse(). Quindi, le assegneremo una nuova variabile:

Il nostro nuovo oggetto è ora o. Sarà uguale a obj. Una maggiore comprensione si ottiene considerando JSON.parse() in un file HTML come questo:

Qui puoi effettivamente vedere come abbiamo convertito la stringa s in un oggetto recuperabile. Pertanto, JSON.parse() è un'opzione sicura per convertire le stringhe JSON in oggetti.

Conclusione

Come abbiamo visto in questo tutorial, JSON ha molte implementazioni in JavaScript. È particolarmente utile poiché può essere utilizzato con quasi tutti i linguaggi di programmazione, rendendolo la scelta naturale. Oltre a questo, abbiamo solo grattato la superficie. C'è molto altro che puoi fare con JSON. È già supportato nelle API.

Ecco altre risorse dal nostro blog che ti aiuteranno a programmare con JavaScript:

• Scopri come i prototipi e l'ereditarietà funzionano in Javascript.
• Esplora in dettaglio come aggiungere JavaScript all'HTML.
• Se stai creando la tua applicazione web, dai un'occhiata alla nostra guida su come scegliere la migliore configurazione del server.

Buona programmazione!