Una lezione che esamina cos'è JSON e quali vantaggi presenta rispetto ad altri formati di dati.

Comprendere JSON

JSON (JavaScript Object Notation) è un formato di testo per rappresentare i dati nella notazione di oggetti JavaScript.

Ciò significa che i dati in JSON sono organizzati allo stesso modo di un oggetto JavaScript. Ma a differenza di quest’ultimo, il formato di registrazione JSON presenta alcune caratteristiche di cui parleremo poco dopo.

JSON viene solitamente utilizzato insieme ad AJAX in modo che il server possa trasmettere i dati in una forma conveniente a uno script JavaScript, che li visualizzerà quindi sulla pagina.

Struttura del formato JSON

Coloro che hanno familiarità con il processo di creazione di oggetti in JavaScript non vedranno nulla di nuovo nella struttura del formato JSON. Questo perché la struttura JSON corrisponde alla struttura dell'oggetto JavaScript con alcune restrizioni.

È più semplice pensare a JSON come a un contenitore di elementi. Ogni elemento in tale contenitore è un'unità strutturale composta da una chiave e un valore.

In questo caso il valore è direttamente correlato alla chiave e forma la cosiddetta coppia chiave-valore. Per ottenere un valore in un oggetto del genere, è necessario conoscerne la chiave. Sintatticamente, tali dati in JSON sono scritti come segue:

Nella voce precedente, puoi vedere che la chiave è separata dal valore con due punti (:). In questo caso, la chiave nell'oggetto JSON deve essere racchiusa tra virgolette doppie. Questa è la prima caratteristica di JSON che lo distingue da un oggetto JavaScript. Perché in un oggetto JavaScript, la chiave (proprietà dell'oggetto) non deve essere racchiusa tra virgolette doppie.

Ad esempio, una struttura di oggetti valida dal punto di vista JavaScript ma non valida dal punto di vista JSON:

Var persona = ( nome: "John"; ) // Oggetto JavaScript

Attenzione: cercare di impostare il nome della chiave in modo tale da non complicare l'accesso ai dati, ad es. quando si compone un nome, è preferibile utilizzare la notazione maiuscola o cammello o utilizzare un trattino basso ("_") per collegare le parole.

Il valore della chiave in JSON può essere scritto in uno dei seguenti formati: string (stringa), number (numero), object (oggetto), array (array), booleano (valore booleano vero o falso), null (valore speciale JavaScript) .

Questa è la seconda limitazione in JSON, perché un oggetto JavaScript può contenere qualsiasi tipo di dati, inclusa una funzione.

Var persona = ( "nome" : "John"; "setName": funzione() ( console.log(this.name); ) ) // Oggetto JavaScript

Una virgola (,) viene utilizzata per separare un elemento (coppia chiave-valore) da un altro.

Ad esempio, considera un JSON composto da vari tipi di dati.

Attenzione: il formato di rappresentazione dei dati JSON non consente l'utilizzo di commenti all'interno della sua struttura.

Lavorare con JSON in JavaScript

A differenza di un oggetto JavaScript, JSON è una stringa.

Per esempio:

// ad esempio, la variabile personData contiene una stringa JSON var personData = "("name":"Ivan","age":37,"mother":("name":"Olga","age": 58),"bambini":["Masha","Igor","Tanya"],"sposato": true,"cane": null)";

Il lavoro con JSON viene solitamente eseguito in due direzioni:

L'analisi è la traduzione di una stringa contenente JSON in un oggetto JavaScript.

Conversione di un oggetto JavaScript in una stringa JSON. In altre parole, questa azione fa il contrario dell'analisi.

Analisi JSON

Analisi JSON, ad es. la traduzione di una stringa JSON in un oggetto JavaScript viene eseguita utilizzando il metodo eval() o parse().

Utilizzando il metodo eval():

// la variabile persona è un oggetto JavaScript che si ottiene eseguendo il codice JSON (stringa) var person= eval("("+personData+")");

Utilizzando il metodo JSON.parse():

// la variabile person è un oggetto JavaScript ottenuto analizzando una stringa JSON var person = JSON.parse(personData);

Conversione di un oggetto JavaScript in una stringa JSON

La traduzione di un oggetto JavaScript in una stringa JSON viene eseguita utilizzando il metodo JSON.stringify(). Questo metodo fa l'opposto del metodo JSON.parse().

Var personString = JSON.strigify(persona);

Vantaggi del formato JSON

Il formato di rappresentazione dei dati JSON presenta i seguenti vantaggi:

• metodi convenienti e veloci per convertire (parsing) una stringa JSON in un oggetto JavaScript e viceversa;
• struttura dei dati chiara e semplice;
• dimensioni molto ridotte rispetto ad altri formati di dati (es. XML). Questo perché il formato JSON contiene la formattazione minima possibile, ovvero durante la scrittura vengono utilizzati solo pochi caratteri speciali. Questo è un vantaggio molto importante, perché i dati presentati in formato JSON verranno caricati più velocemente rispetto a se fossero presentati in altri formati.

Dato che questo formato presenta molti vantaggi, è stato utilizzato non solo in JavaScript, ma anche in molti altri linguaggi come C, Ruby, Perl, Python, PHP, ecc.

Confronto tra formati JSON e XML

Il formato JSON presenta i seguenti vantaggi rispetto al formato XML:

Quando si passano alcuni dati, la dimensione JSON sarà significativamente inferiore alla dimensione XML.

JSON dispone di metodi più convenienti per la conversione in strutture dati JavaScript rispetto a XML.

JSON è più facile da creare rispetto a XML.

L'utilizzo dei dati JSON dopo l'analisi avviene come con un oggetto JavaScript.

//JSON var personData = "("nome":"Ivan","età":37,"madre":("nome":"Olga","età":58),"bambini":["Masha" ,"Igor","Tanya"],"sposato": true,"cane": null)"; //Oggetto persona JavaScript var person = JSON.parse(personData);

Considera i punti principali:

//ottiene i valori della chiave (proprietà) nome person.name; persona["nome"]; //ottengo i valori della chiave (proprietà) name, situata nell'oggetto mother person.mother.name; //elimina l'elemento età delete(person.age) //aggiungi (o aggiorna) la chiave (proprietà) person.eye = "marrone"; //quando si lavora con gli array, è necessario utilizzare metodi progettati per funzionare specificamente con gli array //rimuovere 1 elemento dall'array (metodo splice) person.children.splice(1,1) //aggiungere un elemento all'array (metodo push ) persona.bambini.push("Kate");

Per scorrere gli elementi in un oggetto, puoi utilizzare un ciclo for..in:

For (chiave di persona) ( if (person.hasOwnProperty(chiave)) ( //chiave = chiave //valore = persona console.log("Chiave = " + chiave); console.log("Valore = " + persona) ; ) // se l'oggetto persona ha una chiave (se la persona ha una proprietà chiave) ) ​​// esegue un'iterazione su tutte le chiavi (proprietà) nell'oggetto

È possibile utilizzare il ciclo seguente per scorrere gli elementi di un array:

Per (var i=0; i

Devi aver già sentito parlare di JSON. Che cos'è? Cosa può fare e come può essere utilizzato?

In questa lezione tratteremo le basi di JSON e tratteremo i seguenti punti:

• Cos'è JSON?
• A cosa serve JSON?
• Come creare una stringa JSON?
• Un semplice esempio di stringa JSON.
• Confrontiamo JSON e XML.
• Come lavorare con JSON in JavaScript e PHP?

Cos'è JSON?

JSON è un modo semplice e basato su testo per archiviare e comunicare dati strutturati. Con una sintassi semplice, puoi facilmente memorizzare qualsiasi cosa, da un singolo numero a stringhe, matrici e oggetti in testo semplice. Puoi anche collegare insieme array e oggetti per creare strutture dati complesse.

Una volta creata una stringa JSON, è facile inviarla a un'altra applicazione o a un'altra posizione sulla rete perché è testo semplice.

JSON presenta i seguenti vantaggi:

• È compatto.
• Le sue frasi sono facili da leggere e comporre sia per l'uomo che per il computer.
• Può essere facilmente convertito in una struttura dati per la maggior parte dei linguaggi di programmazione (numeri, stringhe, booleani, array e così via)
• Molti linguaggi di programmazione dispongono di funzioni e librerie per leggere e creare strutture JSON.

Il nome JSON sta per JavaScript Object Notation (rappresentazione di oggetti JavaScript). Come indica il nome, si basa sul modo in cui vengono definiti gli oggetti (molto simile alla creazione di array associativi in ​​altri linguaggi) e gli array.

A cosa serve JSON?

L'uso più comune di JSON è inviare dati dal server al browser. In genere, i dati JSON vengono forniti utilizzando AJAX, che consente al browser e al server di scambiare dati senza dover ricaricare la pagina.

L'utente fa clic sulla miniatura di un prodotto in un negozio online.

Il JavaScript in esecuzione sul browser effettua una richiesta AJAX allo script PHP in esecuzione sul server, passando l'ID del prodotto selezionato.

Lo script PHP ottiene il nome del prodotto, la descrizione, il prezzo e altre informazioni dal database. Quindi compone una stringa JSON dai dati e la invia al browser.

Il JavaScript in esecuzione sul browser riceve la stringa JSON, la decodifica e visualizza le informazioni sul prodotto nella pagina per l'utente.

Puoi anche utilizzare JSON per inviare dati dal browser al server passando la stringa JSON come parametro nelle richieste GET o POST. Ma questo metodo è meno comune, poiché il passaggio dei dati attraverso le richieste AJAX può essere semplificato. Ad esempio, l'ID prodotto potrebbe essere incluso nell'URL come parte della richiesta GET.

La libreria jQuery dispone di diversi metodi, come getJSON() e parseJSON() , che semplificano il recupero dei dati utilizzando JSON tramite richieste AJAX.

Come creare una stringa JSON?

Esistono alcune regole di base per la creazione di una stringa JSON:

• La stringa JSON contiene un array di valori o un oggetto (un array associativo di coppie nome/valore).
• vettoreè racchiuso tra parentesi quadre ([ e ]) e contiene un elenco di valori separati da virgole.
• Un oggettoè racchiuso tra parentesi graffe (( e )) e contiene un elenco separato da virgole di coppie nome/valore.
• coppia nome/valoreè costituito da un nome di campo racchiuso tra virgolette doppie seguito da due punti (:) e dal valore del campo.
• Senso in un array o oggetto può essere:
  • Numero (intero o in virgola mobile)
  • Stringa (tra virgolette doppie)
  • Valore booleano (vero o falso)
  • Un altro array (racchiuso tra parentesi quadre)
  • Un altro oggetto (racchiuso tra parentesi graffe)
  • valore nullo

Per includere virgolette doppie in una stringa, è necessario utilizzare una barra rovesciata: \" . Proprio come in molti linguaggi di programmazione, è possibile inserire caratteri di controllo e codici esadecimali in una stringa facendoli precedere da una barra rovesciata. Consulta il sito JSON per i dettagli.

Esempio di stringa JSON semplice

Di seguito è riportato un esempio di checkout in formato JSON:

( "orderID": 12345, "shopperName": "Vanja Ivanov", "shopperEmail": " [e-mail protetta]", "contents": [ ( "productID": 34, "productName": "Super prodotto", "quantity": 1 ), ( "productID": 56, "productName": "Prodotto miracoloso", "quantity": 3 )], "orderCompleted": true )

Vediamo la linea nel dettaglio:

• Creiamo un oggetto utilizzando le parentesi graffe (( e )).
• Nell'oggetto sono presenti diverse coppie nome/valore: "orderID": 12345 Proprietà con nome "orderId" e valore intero 12345 "shopperName": Proprietà "Vanya Ivanov" con nome "shopperName" e valore stringa "Vanya Ivanov" "shopperEmail" : " [e-mail protetta]" Proprietà denominata "shopperEmail" con valore stringa " [e-mail protetta]" "contents": [ ... ] Proprietà denominata "contents" il cui valore è un array "orderCompleted": true Proprietà denominata "orderCompleted" con valore booleano true
• Ci sono 2 oggetti nell'array "contents" che rappresentano le voci nell'ordine. Ogni oggetto contiene 3 proprietà: productID , productName e amount .

A proposito, poiché JSON si basa sulla dichiarazione di oggetti JavaScript, puoi rendere rapidamente e facilmente la stringa JSON sopra un oggetto JavaScript:

var carrello = ( "orderID": 12345, "shopperName": "Vanya Ivanov", "shopperEmail": " [e-mail protetta]", "contents": [ ( "productID": 34, "productName": "Super prodotto", "quantity": 1 ), ( "productID": 56, "productName": "Prodotto miracoloso", "quantity": 3 )], "orderCompleted": true );

Confronto tra JSON e XML

In molti modi, puoi considerare JSON come un'alternativa a XML, almeno nel regno delle applicazioni web. Il concetto di AJAX era originariamente basato sull'uso di XML per trasferire dati tra un server e un browser. Ma negli ultimi anni JSON è diventato sempre più popolare per il trasferimento dati AJAX.

Mentre XML è una tecnologia collaudata utilizzata in un discreto numero di applicazioni, JSON ha il vantaggio di essere un formato dati più compatto e più facile da riconoscere.

Ecco come apparirebbe l'esempio di oggetto XML sopra:

ID ordine 12345 acquirenteNome Vanya Ivanov acquirenteE-mail [e-mail protetta] contenuto productID 34 productName Super Quantità prodotto 1 productID 56 productName Super Quantità prodotto 3 orderCompleted true

La versione XML è significativamente più grande. In realtà è lungo 1128 caratteri, mentre la variante JSON è lunga solo 323 caratteri. Anche la versione XML è difficile da capire.

Naturalmente, questo è un esempio radicale. Ed è possibile creare una voce XML più compatta. Ma anche questo sarà significativamente più lungo dell'equivalente JSON.

Lavorare con la stringa JSON in JavaScript

JSON ha un formato semplice, ma creare manualmente una stringa JSON è piuttosto noioso. Inoltre, spesso è necessario prendere una stringa JSON e convertirne il contenuto in una variabile che può essere utilizzata nel codice.

La maggior parte dei linguaggi di programmazione dispone di strumenti per convertire facilmente le variabili in stringhe JSON e viceversa.

Crea una stringa JSON da una variabile

JavaScript ha un metodo JSON.stringify() integrato che accetta una variabile e restituisce una stringa JSON che ne rappresenta il contenuto. Ad esempio, creiamo un oggetto JavaScript che contiene i dettagli dell'ordine dal nostro esempio e quindi creiamo una stringa JSON da esso:

var carrello = ( "orderID": 12345, "shopperName": "Vanya Ivanov", "shopperEmail": " [e-mail protetta]", "contents": [ ( "productID": 34, "productName": "Super prodotto", "quantity": 1 ), ( "productID": 56, "productName": "Prodotto miracoloso", "quantity": 3)], "orderCompleted": true); alert(JSON.stringify(carrello));

Questo codice darà:

Tieni presente che il metodo JSON.stringify() restituisce una stringa JSON senza spazi. È più difficile da leggere, ma è più compatto per la trasmissione su una rete.

Esistono diversi modi per analizzare una stringa JSON in JavaScript, ma il più sicuro e affidabile è utilizzare il metodo JSON.parse() integrato. Richiede una stringa JSON e restituisce un oggetto o un array JavaScript che contiene i dati. Per esempio:

var jsonString = " \ ( \ "orderID": 12345, \ "shopperName": "Vanya Ivanov", \ "shopperEmail": " [e-mail protetta]", \ "contents": [ \ ( \ "productID": 34, \ "productName": "Super prodotto", \ "quantity": 1 \ ), \ ( \ "productID": 56, \ "productName": "Prodotto meraviglioso", \ "quantità": 3 \ ) \ ], \ "orderCompleted": true \ ) \ "; var carrello = JSON.parse(jsonString); alert(cart.shopperEmail); alert(carrello.contents.nomeprodotto);

Abbiamo creato una variabile jsonString che contiene la stringa JSON del nostro esempio di ordine. Passiamo quindi questa stringa al metodo JSON.parse(), che crea un oggetto contenente i dati JSON e lo memorizza nella variabile cart. Tutto ciò che resta da fare è testare stampando le proprietà dell'oggetto shopperEmail e il productName dell'array dei contenuti.

Di conseguenza, otterremo il seguente output:

In un'applicazione reale, il tuo codice JavaScript riceverà l'ordine come stringa JSON in una risposta AJAX dallo script del server, passerà la stringa al metodo JSON.parse() e quindi utilizzerà i dati per visualizzarla sulla pagina dell'utente.

JSON.stringify() e JSON.parse() hanno altre funzionalità, come l'utilizzo di funzioni di callback per convertire in modo personalizzato determinati dati. Queste opzioni sono molto utili per convertire vari dati in oggetti JavaScript validi.

Lavorare con la stringa JSON in PHP

PHP, come JavaScript, dispone di funzioni integrate per lavorare con stringhe JSON.

Crea una stringa JSON da una variabile PHP

La funzione json_encode() accetta una variabile PHP e restituisce una stringa JSON che rappresenta il contenuto della variabile. Ecco il nostro esempio di ordine scritto in PHP:

Questo codice restituisce esattamente la stessa stringa JSON dell'esempio JavaScript:

("orderID":12345,"shopperName":"Vanja Ivanov","shopperEmail":" [e-mail protetta]","contents":[("productID":34,"productName":"Super prodotto","quantity":1),("productID":56,"productName":"Prodotto meraviglioso","quantity": 3)],"orderCompleted":true)

In un'applicazione reale, il tuo script PHP invierà questa stringa JSON come parte di una risposta AJAX al browser, dove il codice JavaScript, utilizzando il metodo JSON.parse(), la analizzerà nuovamente in una variabile da visualizzare sulla pagina dell'utente .

Puoi passare vari flag come secondo argomento alla funzione json_encode(). Con il loro aiuto, puoi modificare i principi di codifica del contenuto delle variabili in una stringa JSON.

Crea una variabile da una stringa JSON

Il metodo json_decode() viene utilizzato per convertire una stringa JSON in una variabile PHP. Sostituiamo il nostro esempio JavaScript con il metodo JSON.parse() con codice PHP:

Per quanto riguarda JavaScript, questo codice produrrà:

[e-mail protetta] beni miracolosi

Per impostazione predefinita, la funzione json_decode() restituisce oggetti JSON come oggetti PHP. Esistono oggetti PHP generici della classe stdClass . Ecco perché usiamo -> per accedere alle proprietà dell'oggetto nell'esempio sopra.

Se hai bisogno di un oggetto JSON sotto forma di un array PHP associato, devi passare true come secondo argomento alla funzione json_decode(). Per esempio:

$carrello = json_decode($jsonString, true); echo $carrello["e-mailacquirente"] . "
"; echo $carrello["contenuto"]["nomeprodotto"] . "
";

Questo codice produrrà lo stesso output:

[e-mail protetta] beni miracolosi

Puoi anche passare altri argomenti alla funzione json_decode() per specificare la profondità della ricorsione e il modo in cui vengono gestiti gli interi di grandi dimensioni.

Conclusione

Sebbene JSON sia facile da comprendere e utilizzare, è uno strumento molto utile e flessibile per il passaggio di dati tra applicazioni e computer, soprattutto quando si utilizza AJAX. Se hai intenzione di sviluppare un'applicazione AJAX, non c'è dubbio che JSON sarà lo strumento più importante nel tuo laboratorio.

JSON (JavaScript Object Notation) è un formato di trasferimento dati. Come suggerisce il nome, il formato si basa sul linguaggio di programmazione JavaScript, ma è disponibile anche in altri linguaggi (Python, Ruby, PHP, Java).

JSON utilizza l'estensione .json. Se utilizzata in altri formati di file (come .html), la stringa JSON viene racchiusa tra virgolette o assegnata a una variabile. Questo formato può essere facilmente trasferito tra un server Web e un client o browser.

Leggero e facile da leggere, JSON è un'ottima alternativa a XML.

Questa guida ti introdurrà ai vantaggi, agli oggetti, alla struttura generale e alla sintassi di JSON.

Sintassi e struttura JSON

L'oggetto JSON ha la forma di un valore-chiave e solitamente è scritto tra parentesi graffe. Quando si lavora con JSON, tutti gli oggetti vengono archiviati in un file .json, ma possono anche esistere come oggetti separati nel contesto di un programma.

L'oggetto JSON è simile al seguente:

"nome": "Giovanni",
"cognome": "Smith",
"località": "Londra",
"in linea": vero
"seguaci": 987

Questo è un esempio molto semplice. Un oggetto JSON può contenere più stringhe.

Come puoi vedere, l'oggetto è costituito da coppie chiave-valore, racchiuse tra parentesi graffe. La maggior parte dei dati in JSON sono scritti come oggetti.

Tra la chiave e il valore vengono inseriti i due punti. Ogni coppia deve essere seguita da una virgola. Il risultato è:

"chiave" : "valore", "chiave" : "valore", "chiave" : "valore"

La chiave in JSON è a sinistra. La chiave deve essere racchiusa tra virgolette doppie. Qualsiasi stringa valida può essere utilizzata come chiave. All'interno di un oggetto, tutte le chiavi devono essere univoche. La chiave può contenere uno spazio ("nome"), ma durante la programmazione potrebbero verificarsi problemi nell'accesso a tale chiave. Pertanto, al posto dello spazio, è meglio utilizzare il carattere di sottolineatura (“nome”).

I valori JSON si trovano sul lato destro della colonna. Qualsiasi tipo di dati semplice può essere utilizzato come valore:

• stringhe
• Numeri
• Oggetti
• Array
• Dati booleani (vero o falso)

I valori possono anche essere rappresentati da tipi di dati complessi (come oggetti o array JSON).

JSON supporta la sintassi individuale di ciascuno dei tipi di dati sopra elencati: se il valore è rappresentato da una stringa, verrà racchiuso tra virgolette, mentre se è un numero, non verrà racchiuso tra virgolette.

Di norma, i dati nei file .json vengono scritti in una colonna, ma JSON può anche essere scritto in una riga:

( "first_name": "John", "last_name": "Smith", "online": true,)

Questo è il modo in cui i dati JSON vengono solitamente scritti su un altro tipo di file.

Scrivendo dati JSON in una colonna, migliori la leggibilità del file (soprattutto se nel file sono presenti molti dati). JSON ignora gli spazi tra le colonne, quindi puoi usarli per dividere i dati in un numero di colonne leggibili.

"nome": "Giovanni",
"cognome": "Smith",
"in linea": vero

Tieni presente che gli oggetti JSON sono molto simili agli oggetti JavaScript, ma non hanno lo stesso formato. Ad esempio, puoi utilizzare le funzioni in JavaScript, ma non in JSON.

Il vantaggio principale di JSON è che i dati in questo formato sono supportati da molti linguaggi di programmazione popolari, quindi possono essere trasferiti rapidamente.

Ora hai familiarità con la sintassi JSON di base. Ma i file JSON possono avere una struttura gerarchica complessa che include array e oggetti nidificati.

Tipi complessi in JSON

JSON può memorizzare oggetti e array nidificati che verranno passati come valore della chiave loro assegnata.

oggetti nidificati

Di seguito troverai un esempio: il file users.json, che contiene dati sugli utenti. Per ogni utente

("john", "jesse", "drew", "jamie") come valore viene passato un oggetto annidato che, a sua volta, è costituito anche da chiavi e valori.

Nota: il primo oggetto JSON nidificato è evidenziato in rosso.

"John" :(
"nome utente": "Giovanni",
"località": "Londra",
"in linea": vero
"seguaci": 987

"Jesse" :(
"nome utente": "Jesse",
"località": "Washington",
"in linea": falso
"seguaci": 432

"ha disegnato" :(
"nome utente": "Drew",
"località": "Parigi",
"in linea": falso
"seguaci": 321

"Jamie" :(
"nome utente": "Jamie",
"località": "Berlino",
"in linea": vero
"seguaci": 654

Tieni presente che le parentesi graffe vengono utilizzate sia negli oggetti nidificati che in quelli principali. Le virgole vengono utilizzate negli oggetti nidificati allo stesso modo di quelli ordinari.

Array nidificati

I dati possono essere incorporati in JSON utilizzando array JavaScript, che verranno passati come valori. JavaScript utilizza parentesi quadre () all'inizio e alla fine di un array. Un array è una raccolta ordinata di dati che può contenere dati di vario tipo.

Un array viene utilizzato per trasferire una grande quantità di dati che possono essere raggruppati. Ad esempio, proviamo a registrare i dati dell'utente.

{
"nome": "Giovanni",
"cognome": "Smith",
"località": "Londra",
"siti web" : [

"descrizione" : "lavoro",
"URL": "https://www.johnsmithsite.com/"

},
{

"descrizione" : "tutorial",
"URL": "https://www.johnsmithsite.com/tutorials"

"social media" : [

"descrizione": "twitter",
"link": "https://twitter.com/johnsmith"

"descrizione": "facebook",
"link": "https://www.facebook.com/johnsmith"

"descrizione": "github",
"collegamento": "https://github.com/johnsmith"

Alle chiavi "websites" e "social_media" vengono assegnati array come valori, che vengono inseriti tra parentesi quadre.

Utilizzando array e oggetti nidificati, è possibile creare una gerarchia di dati complessa.

JSON o XML?

XML (eXtensible Markup Language) consente di archiviare i dati in un formato conveniente per la percezione umana e meccanica. Il formato XML è supportato da un gran numero di linguaggi di programmazione.

XML e JSON hanno molto in comune. Tuttavia, XML richiede molto più testo, quindi i file sono più grandi e più difficili da leggere e scrivere. Inoltre, XML viene elaborato solo con un interprete XML, mentre JSON può essere elaborato con una semplice funzione. A differenza di JSON, XML non può archiviare array.

Confrontiamo due file: contengono gli stessi dati, ma il primo è scritto in formato XML e il secondo è scritto in JSON.

utenti.xml

Giovanni Londra

Jesse Washington

Ha disegnato Parigi

Jamie Berlino

utenti.json
("utenti": [

("nome utente": "John", "località": "Londra"),
("nome utente": "Jesse", "località": "Washington"),
("nome utente": "Drew", "località": "Parigi"),
("nome utente": "JamieMantisShrimp", "località": "Berlino")

JSON è un formato molto compatto e non richiede tanti tag quanto XML. Inoltre, XML, a differenza di JSON, non supporta gli array.

Se hai familiarità con l'HTML, noterai che il formato XML gli è molto simile (in particolare in termini di tag). JSON è più semplice, richiede meno testo ed è più facile da utilizzare, ad esempio, nelle applicazioni AJAX.

Naturalmente il formato dovrà essere scelto in base alle esigenze dell'applicazione.

Strumenti JSON

JSON è comunemente utilizzato in JavaScript, ma il formato è ampiamente utilizzato in altri linguaggi di programmazione.

Maggiori informazioni sulla compatibilità e sulla gestione di JSON possono essere trovate sul sito del progetto e nella libreria jQuery.

È raro scrivere JSON da zero. In genere, i dati vengono caricati da origini o convertiti in JSON. Puoi convertire dati CSV o delimitati da tabulazioni in JSON utilizzando Mr. convertitore di dati. Per convertire XML in JSON e viceversa, utilizzare utilities-online.info . Quando lavori con strumenti automatici, assicurati di controllare il risultato.

I file JSON (inclusi i dati convertiti) possono essere convalidati utilizzando il servizio JSONLint. Per testare JSON in un contesto di sviluppo web, fare riferimento a JSFiddle .

Conclusione

JSON è un formato dati semplice e leggero. I file JSON sono facili da trasferire, archiviare e utilizzare.

Oggi JSON viene spesso utilizzato nelle API.

La sintassi JSON è un sottoinsieme della sintassi JavaScript.

Regole di sintassi JSON

La sintassi JSON deriva dalla sintassi dell'oggetto della notazione JavaScript:

• Dati in coppie nome/valore
• Dati separati da virgole
• Le parentesi graffe contengono oggetti
• Le parentesi quadre contengono array

Dati JSON: nome e valore

I dati JSON vengono scritti come coppie nome/valore.

La coppia nome/valore è composta dal nome del campo (tra virgolette doppie) seguito da due punti seguiti dal valore:

esempio

"firstName": "Giovanni"

I nomi JSON richiedono virgolette doppie. I nomi JavaScript non lo sono.

Valori JSON

I valori JSON possono essere:

• Serie (intera o float)
• Stringa (tra virgolette doppie)
• Booleano (vero o falso)
• Array (tra parentesi quadre)
• Oggetto (tra parentesi graffe)

Oggetti JSON

Gli oggetti JSON sono scritti tra parentesi graffe.

Proprio come JavaScript, gli oggetti JSON possono contenere più coppie nome/valore:

esempio

("firstName":"Giovanni", "cognome":"Daina")

Array JSON

Gli array JSON sono scritti tra parentesi quadre.

Proprio come JavaScript, un array JSON può contenere più oggetti:

esempio

"dipendenti":[

("firstName":"Peter","lastName":"Jones")
]

Nell'esempio precedente, l'oggetto "employees" è un array contenente tre oggetti. Ogni oggetto è la registrazione di una persona (con nome e cognome).

JSON utilizza la sintassi JavaScript

Poiché la sintassi JSON deriva dalla notazione dell'oggetto JavaScript, è necessario pochissimo software aggiuntivo per lavorare con JSON in JavaScript.

Con JavaScript, puoi creare un array di oggetti e assegnargli dati, in questo modo:

esempio

var dipendenti = [
("firstName":"Giovanni", "cognome":"Daina"),
("firstName":"Anna", "lastName":"Smith"),
("firstName": "Peter", "lastName": "Jones")
];

È possibile accedere alla prima voce in un array di oggetti JavaScript in questo modo:

Inoltre, puoi ottenerlo in questo modo:

I dati possono essere modificati come segue:

Può anche essere modificato in questo modo:

Nel prossimo capitolo imparerai come convertire il testo JSON in un oggetto JavaScript.

File JSON

• Tipo di file per file JSON ".json"
• Tipo MIME per il testo JSON "application/json"

Cos'è JSON e di cosa è capace? In questo articolo imparerai come utilizzare JSON per lavorare facilmente con i dati. Vedremo anche come lavorare con JSON utilizzando PHP e JavaScript.

Se hai sviluppato siti Web o applicazioni Web in generale, è probabile che tu abbia sentito parlare di JSON, almeno di sfuggita. Ma cosa significa esattamente JSON? Cosa può fare questo formato dati e come utilizzarlo?

In questo articolo impareremo le basi per lavorare con il formato JSON. Seguiremo i seguenti argomenti:

• Cos'è il formato JSON?
• Come creare stringhe JSON?
• Un semplice esempio di dati JSON
• Confronto tra JSON e XML

Iniziamo!

Cos'è il formato JSON?

JSON è un modo semplice e basato su testo per archiviare e comunicare dati strutturati. Con una sintassi semplice, puoi facilmente memorizzare sia numeri semplici che stringhe, matrici e oggetti, utilizzando nient'altro che testo. Puoi anche collegare oggetti e array, il che ti consente di creare strutture dati complesse.

Dopo aver creato una stringa JSON, può essere facilmente inviata a qualsiasi applicazione o computer, poiché è solo testo.

JSON ha molti vantaggi:

• È compatto
• È leggibile dall'uomo e facile da leggere dal computer.
• Può essere facilmente convertito in formati programmatici: valori numerici, stringhe, formato booleano, valore nullo, array e array associativi.
• Quasi tutti i linguaggi di programmazione dispongono di funzioni che consentono di leggere e creare il formato dati json.

Letteralmente, JSON sta per JavaScript Object Notation. Come descritto in precedenza, questo formato si basa sulla creazione di oggetti, in qualche modo simile agli array associativi in ​​altri linguaggi di programmazione.

Qual è lo scopo di JSON?

Soprattutto, json viene utilizzato per scambiare dati tra javascript e lato server (php). In altre parole, per la tecnologia Ajax. Ciò è molto utile quando si passano più variabili o interi array di dati.

Come appare nell'esempio:

L'utente fa clic sull'immagine in miniatura

JavaScript gestisce questo evento e invia una richiesta Ajax allo script PHP, passando l'ID dell'immagine.

Sul server, php ottiene la descrizione dell'immagine, il nome dell'immagine, l'indirizzo dell'immagine grande e altre informazioni dal database. Al ricevimento, si converte in formato JSON e lo rimanda alla pagina dell'utente.

JavaScript riceve la risposta JSON, elabora i dati, genera codice html e visualizza un'immagine più grande con una descrizione e altre informazioni.

Ecco come viene ingrandita l'immagine, senza ricaricare la pagina nel browser. Ciò è molto comodo quando dobbiamo ricevere dati parziali o trasferire una piccola quantità di informazioni al server.

Il jQuery preferito da tutti ha le funzioni getJSON() e parseJSON() che ti aiutano a lavorare con il formato tramite richieste Ajax.

Come creare stringhe JSON?

Di seguito sono riportate le regole di base per la creazione di stringhe JSON:

• La stringa JSON contiene sia un array di valori che un oggetto (un array associativo con coppie nome/valore).
• L'array deve essere racchiuso tra parentesi quadre, [ e ], può contenere un elenco di valori separati da una virgola.
• Gli oggetti avvolti con catene a spirale, ( e ), contengono anche coppie nome/valore separate da virgole.
• Le coppie nome/valore sono costituite dal nome del campo (tra virgolette doppie) seguito da due punti (:) seguiti dal valore del campo specificato.
• I valori in un array o oggetto possono essere:
  • Numerico (intero o frazionario con un punto)
  • Stringhe (racchiuse tra virgolette doppie)
  • Booleano (vero o falso)
  • Altri array (racchiusi tra parentesi quadre [ e ])
  • Altri oggetti (avvolti in bracci sagomati ( e ))
  • Valore nullo (null)

Importante! Se utilizzi virgolette doppie nei valori, esegui l'escape con una barra rovesciata: \". Puoi anche utilizzare caratteri con codifica esadecimale, come fai in altri linguaggi di programmazione.

Un semplice esempio di dati JSON

L'esempio seguente mostra come salvare i dati nel "carrello" di un negozio online utilizzando il formato JSON:

( "orderID": 12345, "shopperName": "Giovanni Smith", "shopperEmail": " [e-mail protetta]", "contents": [ ( "productID": 34, "productName": "SuperWidget", "quantity": 1 ), ( "productID": 56, "productName": "WonderWidget", "quantity": 3 ) ], "orderCompleted": true )

Analizziamo questi dati pezzo per pezzo:

All'inizio e alla fine usiamo gli archi ricci ( e ), che rendono chiaro che si tratta di un oggetto.

All'interno dell'oggetto abbiamo diverse coppie nome/valore:

"orderID": 12345 - campo denominato orderId e valore 12345

"shopperName": "John Smith" - campo denominato shopperName e valore John Smith

"shopperEmail": "[email protected]" - proprio come nel campo precedente, l'e-mail dell'acquirente viene archiviata qui.

"contents": [ ... ] è un campo denominato content, il cui valore è un array.

"orderCompleted": true - campo denominato orderCompleted il cui valore è true

All'interno dell'array content abbiamo due oggetti che visualizzano il contenuto del carrello. Ogni oggetto prodotto ha tre proprietà: productID, productName, quantità.

Infine, poiché JSON è identico agli oggetti in JavaScript, puoi facilmente prendere questo esempio e creare da esso un oggetto JavaScript:

var carrello = ( "orderID": 12345, "shopperName": "John Smith", "shopperEmail": " [e-mail protetta]", "contents": [ ( "productID": 34, "productName": "SuperWidget", "quantity": 1 ), ( "productID": 56, "productName": "WonderWidget", "quantity": 3 ) ], "orderCompleted": true );

Confronto tra JSON e XML

Nella maggior parte dei casi, penserai a JSON come un'alternativa a XML, almeno all'interno delle applicazioni web. Il concetto di Ajax originariamente utilizzava XML per comunicare tra il server e il browser, ma negli ultimi anni JSON è diventato più popolare per il passaggio dei dati Ajax.

Sebbene XML sia una tecnologia collaudata utilizzata da molte applicazioni, i vantaggi del formato JSON sono che è più compatto e più facile da scrivere e leggere.

Ecco l'esempio JSON sopra, riscritto solo in formato XML:

ID ordine 12345 acquirenteNome acquirente John SmithE-mail [e-mail protetta] contenuto productID 34 productName SuperWidget quantità 1 productID 56 productName WonderWidget quantità 3 orderCompleted true

Come puoi vedere, è molte volte più lungo di JSON. Infatti, questo esempio è lungo 1128 caratteri, mentre la versione JSON è lunga solo 323 caratteri. Inoltre la versione XML è più difficile da leggere.

Naturalmente non si può giudicare da un solo esempio, ma anche piccole quantità di informazioni occupano meno spazio in formato JSON che in XML.

Come lavorare con JSON tramite PHP e JS?

Arriviamo quindi alla parte più interessante: il lato pratico del formato JSON. Per prima cosa rendiamo omaggio a JavaScript, poi vedremo come possiamo manipolare JSON tramite PHP.

Creazione e lettura del formato JSON con JavaScript

Sebbene il formato JSON sia semplice, è difficile scriverlo a mano durante lo sviluppo di applicazioni web. Inoltre, spesso devi convertire le stringhe JSON in variabili e quindi utilizzarle nel tuo codice.

Fortunatamente, molti linguaggi di programmazione forniscono strumenti per lavorare con le stringhe JSON. L'idea principale di cui:

Creando stringhe JSON, inizi con variabili contenenti alcuni valori, quindi le passi attraverso una funzione che trasforma i dati in una stringa JSON.

Leggendo le stringhe JSON, si inizia con una stringa JSON contenente determinati dati, si esegue la stringa tramite una funzione che crea variabili contenenti i dati.

Vediamo come viene fatto in JavaScript.

Crea una stringa JSON da una variabile JavaScript

JavaScript ha un metodo integrato, JSON.stringify() , che accetta una variabile javascript e restituisce una stringa json che rappresenta il contenuto della variabile. Ad esempio, utilizziamo l'oggetto creato in precedenza, convertiamolo in una stringa JSON.

var carrello = ( "orderID": 12345, "shopperName": "John Smith", "shopperEmail": " [e-mail protetta]", "contents": [ ( "productID": 34, "productName": "SuperWidget", "quantity": 1 ), ( "productID": 56, "productName": "WonderWidget", "quantity": 3 ) ], "orderCompleted": true); alert(JSON.stringify(carrello));

Ecco cosa verrà visualizzato sullo schermo:

("orderID":12345,"shopperName":"Giovanni Smith","shopperEmail":" [e-mail protetta]", "contents":[("productID":34,"productName":"SuperWidget","quantity":1), ("productID":56,"productName":"WonderWidget","quantity":3) ], "ordineCompletato":true)

Tieni presente che JSON.stringify() restituisce stringhe JSON senza spazi. Difficile da leggere, ma più compatto, il che è importante quando si trasferiscono i dati.

Crea una variabile JavaScript dalla stringa JSON

Esistono diversi modi per analizzare le stringhe JSON, il più accettabile e sicuro è utilizzare il metodo JSON.parse(). Richiede una stringa JSON e restituisce un oggetto JavaScript o un array contenente i dati JSON. Ecco un esempio:

var jsonString = " \ ( \ "orderID": 12345, \ "shopperName": "John Smith", \ "shopperEmail": " [e-mail protetta]", \ "contents": [ \ ( \ "productID": 34, \ "productName": "SuperWidget", \ "quantity": 1 \ ), \ ( \ "productID": 56, \ "productName": " WonderWidget", \ "quantity": 3 \ ) \ ], \ "orderCompleted": true \ ) \ "; var carrello = JSON.parse(jsonString); alert(cart.shopperEmail); alert(carrello.contents.nomeprodotto);

Qui abbiamo creato una variabile, jsonString, che contiene la stringa JSON degli esempi forniti in precedenza. Quindi abbiamo passato questa riga tramite JSON.parse() per creare un oggetto contenente dati JSON, che sono archiviati nella variabile cart. Infine controlliamo la presenza di dati e visualizziamo alcune informazioni utilizzando la finestra modale di avviso.

Verranno visualizzate le seguenti informazioni:

In una vera applicazione web, il tuo codice JavaScript dovrebbe ricevere una stringa JSON come risposta dal server (dopo aver inviato una richiesta AJAX), quindi analizzare la stringa e visualizzare il contenuto del carrello all'utente.

Creazione e lettura del formato JSON con PHP

PHP, come JavaScript, dispone di funzioni che consentono di convertire le variabili nel formato JSON e viceversa. Diamo un'occhiata a loro.

Creazione di una stringa JSON da una variabile PHP

json_encode() accetta una variabile PHP e restituisce una stringa JSON che rappresenta i dati della variabile. Ecco il nostro esempio "carrello" scritto in PHP:

Questo codice restituisce esattamente lo stesso risultato dell'esempio JavaScript: una stringa JSON valida che rappresenta il contenuto delle variabili:

("orderID":12345,"shopperName":"Giovanni Smith","shopperEmail":" [e-mail protetta]","contents":[("productID":34,"productName":"SuperWidget","quantity":1),("productID":56,"productName":"WonderWidget","quantity":3) ],"orderCompleted":true)

In realtà, il tuo script PHP dovrebbe inviare una stringa JSON come risposta a una richiesta AJAX, dove JavaScript utilizzerà JSON.parse() per trasformare la stringa in variabili.

Nella funzione json_encode() è possibile specificare parametri aggiuntivi che consentono di convertire alcuni caratteri in esadecimale.

Creazione di una variabile PHP da una stringa JSON

Similmente a quanto sopra, esiste una funzione json_decode() che consente di decodificare le stringhe JSON e inserire i contenuti in variabili.

Come con JavaScript, questo codice restituirà quanto segue:

[e-mail protetta] Widget delle meraviglie

Per impostazione predefinita, json_decode() restituisce oggetti JSON come oggetti PHP. Come la solita sintassi, usiamo -> per accedere alle proprietà di un oggetto.

Se in seguito desideri utilizzare i dati come array associativo, passa semplicemente true come secondo parametro alla funzione json_decode(). Ecco un esempio:

$carrello = json_decode($jsonString, true); echo $carrello["e-mailacquirente"] . "
"; echo $carrello["contenuto"]["nomeprodotto"] . "
";

Questo produce lo stesso output:

[e-mail protetta] Widget delle meraviglie

Inoltre, è possibile passare argomenti aggiuntivi alla funzione json_decode() per determinare l'elaborazione di numeri grandi e la ricorsione.

In conclusione sul formato JSON

Se intendi creare un'applicazione web utilizzando la tecnologia Ajax, utilizza sicuramente il formato JSON per scambiare dati tra il server e il browser.