Come lavorare con JSON in JavaScript

Introduzione

Poiché JSON deriva dal linguaggio di programmazione JavaScript, è una scelta naturale da utilizzare come formato di dati in JavaScript. JSON, abbreviazione di JavaScript Object Notation, è solitamente pronunciato come il nome “Jason.”

Per saperne di più su JSON in termini generali, leggi il tutorial “An Introduction to JSON”.

Per iniziare a pensare a dove puoi usare JSON nei tuoi programmi JavaScript, alcuni casi d’uso generali di JSON includono:

• Memorizzazione dei dati
• Generazione di strutture dati dall’input dell’utente
• Trasferimento dei dati dal server al client, dal client al server e dal server al server
• Configurazione e verifica dei dati

Questo tutorial ti fornirà un’introduzione al lavoro con JSON in JavaScript. Per sfruttare al meglio questa introduzione, dovresti avere una certa familiarità con il linguaggio di programmazione JavaScript.

Formato JSON

Il formato di JSON deriva dalla sintassi dell’oggetto JavaScript, ma è interamente basato su testo. È un formato di dati chiave-valore che viene in genere reso in parentesi graffe.

Quando lavori con JSON, probabilmente vedrai gli oggetti JSON in un file.json, ma possono anche esistere come oggetto o stringa JSON nel contesto di un programma. Per saperne di più sulla sintassi e la struttura qui.

Quando stai lavorando con un file .json, sarà simile a questo:

{ "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

Se, invece, avete un oggetto JSON in un .js o .html file, è probabile che tu vedi impostare una variabile:

var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

Inoltre, si può vedere JSON come una stringa invece di un oggetto all’interno di un contesto di JavaScript in un file di programma o script. In questo caso, si può anche vedere tutto su una riga:

var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

La conversione di oggetti JSON in stringhe può essere particolarmente utile per il trasporto di dati in modo rapido.

Abbiamo esaminato il formato generale di JSON e come ci si può aspettare di vederlo come un file.json, o all’interno di JavaScript come oggetto o stringa.

Confronto con l’oggetto JavaScript

Vale la pena tenere a mente che JSON è stato sviluppato per essere utilizzato da qualsiasi linguaggio di programmazione, mentre gli oggetti JavaScript possono essere lavorati solo direttamente attraverso il linguaggio di programmazione JavaScript.

In termini di sintassi, gli oggetti JavaScript sono simili a JSON, ma le chiavi negli oggetti JavaScript non sono stringhe tra virgolette. Inoltre, gli oggetti JavaScript sono meno limitati in termini di tipi passati ai valori, quindi possono utilizzare le funzioni come valori.

Diamo un’occhiata ad un esempio di un oggetto JavaScript dell’utente del sito web Sammy Shark che è attualmente online.

var user = { first_name: "Sammy", last_name : "Shark", online : true, full_name : function() { return this.first_name + " " + this.last_name; }};

Questo sarà molto familiare a voi come un oggetto JSON, ma non ci sono le virgolette intorno a qualsiasi dei tasti (first_namelast_nameonline o full_name), e c’è un valore della funzione nell’ultima riga.

Se vogliamo accedere ai dati nell’oggetto JavaScript sopra, potremmo usare la notazione dot per chiamare user.first_name;e ottenere una stringa, ma se vogliamo accedere al nome completo, dovremmo farlo chiamando user.full_name(); perché è una funzione.

Gli oggetti JavaScript possono esistere solo all’interno del linguaggio JavaScript, quindi quando si lavora con dati a cui è necessario accedere da varie lingue, è meglio optare per JSON.

Accesso ai dati JSON

I dati JSON sono normalmente accessibili in Javascript tramite notazione dot. Per capire come funziona, consideriamo l’oggetto JSON sammy:

var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

per accedere a qualsiasi dei valori, useremo la notazione con il punto che assomiglia a questo:

sammy.first_namesammy.last_namesammy.online

La variabile sammy è il primo, seguito da un punto, seguito dal tasto per accedere.

Per creare un avviso JavaScript che ci mostri il valore associato alla chiave first_name in un pop-up, possiamo farlo chiamando la funzione JavaScript alert() :

alert(sammy.first_name);

Output
Sammy

Qui, abbiamo chiamato con successo il valore associato alla chiavefirst_namedall’oggetto JSONsammy.

Possiamo anche usare la sintassi delle parentesi quadre per accedere ai dati da JSON. Per fare ciò, manterremmo la chiave tra virgolette tra parentesi quadre. Per la nostra variabilesammy sopra, l’utilizzo della sintassi delle parentesi quadre in una funzionealert() è simile a questa:

alert(sammy);

Output
true

Quando si lavora con elementi di array nidificati, è necessario chiamare il numero dell’elemento nell’array. Consideriamo il JSON di seguito:

var user_profile = { "username" : "SammyShark", "social_media" : }

Per accedere alla stringa facebook, si può chiamare tale elemento nell’array all’interno di un contesto di notazione del punto:

alert(user_profile.social_media.description);

Output
facebook

si Noti che, per ogni elemento nidificato useremo un ulteriore punto.

L’utilizzo della notazione a punti o della sintassi a parentesi quadre ci consente di accedere ai dati contenuti nel formato JSON.

Funzioni per lavorare con JSON

Questa sezione esaminerà due metodi per la stringificazione e l’analisi di JSON. Essere in grado di convertire JSON da oggetto a stringa e viceversa è utile per il trasferimento e la memorizzazione dei dati.

JSON.stringify ()

La funzione JSON.stringify() converte un oggetto in una stringa JSON.

Le stringhe sono utili per il trasporto di dati da un client a un server attraverso la memorizzazione o il passaggio di informazioni in modo leggero. Ad esempio, è possibile raccogliere le impostazioni di un utente sul lato client e quindi inviarle a un server. Successivamente, è possibile leggere le informazioni con il metodoJSON.parse() e lavorare con i dati secondo necessità.

Esamineremo un oggetto JSON che assegniamo alla variabileobj, e poi lo convertiremo usandoJSON.stringify() passandoobj alla funzione. Possiamo assegnare questa stringa alla variabiles:

var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}var s = JSON.stringify(obj)

Ora, se lavoriamo cons, avremo il JSON a nostra disposizione come una stringa piuttosto che un oggetto.

'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'

La funzioneJSON.stringify() ci consente di convertire gli oggetti in stringhe. Per fare il contrario, esamineremo la funzioneJSON.parse().

JSON.le stringhe parse()

sono utili per il trasporto, ma vorrai essere in grado di convertirle in un oggetto JSON sul client e/o sul lato server. Mentre è possibile convertire il testo in un oggetto con la funzione eval(), non è molto sicuro, quindi useremo la funzione JSON.parse().

Per convertire l’esempio nel JSON.stringify() di cui sopra, si dovrebbe passare la stringa s per la funzione, e assegnarlo a una nuova variabile:

var o = JSON.parse(s)

Poi, ci sarebbe l’oggetto o per lavorare con, che dovrebbe essere identico all’oggetto obj.

Per dare un’occhiata più approfondita, consideriamo un esempio di JSON.parse() nel contesto di un file HTML:

<!DOCTYPE html><html><body><p></p><script>var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';var obj = JSON.parse(s);document.getElementById("user").innerHTML ="Name: " + obj.first_name + " " + obj.last_name + "<br>" +"Location: " + obj.location;</script></body></html>

Output
Name: Sammy SharkLocation: Ocean

Nel contesto di un file HTML, possiamo vedere come la stringa JSONs viene convertita in un oggetto che è recuperabile nel rendering finale della pagina accedendo al JSON tramite notazione a punti.

JSON.parse() è una funzione sicura per analizzare le stringhe JSON e convertirle in oggetti.

Conclusione

JSON è un formato naturale da utilizzare in JavaScript e ha molte implementazioni disponibili per l’uso in molti linguaggi di programmazione popolari. Se si desidera utilizzare il formato in un’altra lingua di programmazione, è possibile visualizzare il supporto completo della lingua sul sito “Introduzione a JSON”.

Poiché è leggero e viene facilmente trasferito tra linguaggi di programmazione e sistemi, JSON ha riscontrato un maggiore supporto nelle API, inclusa l’API di Twitter.