sushiandbox.ru Mastering PC - Internet. Skype. Mezzi sociali. Lezioni su Windows.
Per lavorare con il formato JSON, JavaScript ha un oggetto JSON globale. L'oggetto JSON ha due metodi: stringify() e parse() . Oltre a questi due metodi, non contiene alcuna funzionalità aggiuntiva.
metodo stringify()
Il metodo stringify() converte un valore JavaScript in una stringa JSON.
Funzionalità di conversione:
- Un valore, una funzione o un valore di tipo symbol non definito rilevato durante la conversione verrà omesso (se trovato in un oggetto) o nullo (se trovato in un array).
- I membri prototipo e le proprietà non enumerabili vengono ignorati.
Sintassi
JSON.stringify(valore[, sostituto[, spazio]])Opzioni
value Il valore che verrà convertito in una stringa JSON. replacer (facoltativo) Il valore del parametro può essere una funzione, un array o null .- L'array definisce un insieme di proprietà dell'oggetto che verranno incluse nella stringa JSON. I valori dell'array sono stringhe corrispondenti ai nomi delle proprietà dell'oggetto convertito.
- La funzione consente di sostituire i valori delle proprietà dell'oggetto in una stringa JSON. La funzione deve contenere due parametri: il nome della proprietà e il valore della proprietà. Il nome della proprietà è una stringa. La funzione deve restituire il nuovo valore della proprietà.
- Se il valore del parametro è null , la stringa JSON includerà tutte le proprietà dell'oggetto.
- Il numero specifica il numero di spazi utilizzati come indentazione per ogni livello di nidificazione. Ogni successivo livello di annidamento viene integrato con nuovi rientri. Ad esempio, se il valore del parametro è 2, il primo livello di nidificazione sarà rientrato di due spazi, il successivo livello di nidificazione sarà rientrato di 4 spazi e così via.Il numero massimo di spazi che può essere specificato è 10. Se si specifica un numero maggiore, verrà automaticamente ridotto a 10.
- La stringa specifica il carattere utilizzato come indentazione per ogni livello di nidificazione. La lunghezza della stringa è limitata a 10 caratteri, se specifichi una stringa più lunga, verrà troncata a 10 caratteri. L'utilizzo di una stringa consente inoltre di utilizzare una tabulazione ("\t") come rientro. Ogni successivo livello di annidamento viene riempito con nuovi caratteri di indentazione. Ad esempio, se il valore del parametro è - (trattino), il primo livello di nidificazione utilizzerà un trattino come rientro, il livello di nidificazione successivo utilizzerà 2 trattini e così via.
Valore di ritorno
stringa JSON.
Esempio
let persona = ( nome: "Homer", età: 40, lavoro: ( luogo: "Nuclear Plant", posizione: "Springfield" ) ) // Esempio di parametro singolo console.log(JSON.stringify(persona)); // "("name":"Homer","age":40,"work":("place":"Nuclear plant","location":"Springfield"))" // Esempio con due parametri (array ) console.log(JSON.stringify(persona, ["nome", "età"])); // "("name":"Homer","age":40)" // Esempio con due parametri (funzione) console.log(JSON.stringify(person, function (key, value) ( switch (key ) ( case "name": return "Bart"; case "age": return 10; case "work": return undefined; default: return value; ) ))); // "("name":"Bart","age":10)" // Esempio con tre parametri console.log(JSON.stringify(person, null, 2)); /* ( * "name": "Homer", * "age": 40, * "work": ( * "place": "Nuclear Plant", * "location": "Springfield" * ) * ) */parse() metodo
Il metodo parse() converte la stringa JSON nel valore JavaScript corrispondente.
Funzionalità di conversione:
- Se durante la conversione viene rilevato un valore non definito nella stringa JSON, verrà omesso (non incluso nel risultato).
Sintassi
JSON.parse(testo[, reviver])Opzioni
testo Stringa JSON da convertire nel valore JavaScript corrispondente. reviver (facoltativo) Il valore del parametro deve essere una funzione. La funzione consente di sostituire il valore di una proprietà stringa JSON prima di restituirlo. La funzione deve contenere due parametri: il nome della proprietà e il valore della proprietà. Il nome della proprietà è una stringa. La funzione deve restituire il nuovo valore della proprietà.Valore di ritorno
Il valore JavaScript corrispondente (valore primitivo, oggetto o matrice).
Esempio
Analisi JSON("()"); // () JSON.parse("true"); // vero JSON.parse(""); // Analisi JSON("null"); // nulloCos'è JSON e di cosa è capace? In questo articolo imparerai come utilizzare JSON per lavoro facile 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 di dati e come usarlo?
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 salvare come numeri semplici e stringhe e array, oggetti, usando nient'altro che testo. Puoi anche collegare oggetti e array, il che ti consente di creare strutture di 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 al 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 hanno funzioni che permettono di leggere e creare dati in formato 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. Questo è molto utile quando si passano più variabili o interi array di dati.
Come appare nell'esempio:
- L'utente fa clic su immagini in miniatura
- JavaScript gestisce questo evento e invia una richiesta Ajax allo script PHP, passando l'ID dell'immagine.
- Sul server, php riceve la descrizione dell'immagine, il nome dell'immagine, l'indirizzo di grande immagine e altre informazioni dal database. Al ricevimento, si converte in formato JSON e lo rimanda alla pagina dell'utente.
- JavaScript riceve la risposta sotto forma di JSON, elabora i dati, i moduli codice html e visualizza un'immagine ingrandita con una descrizione e altre informazioni.
In questo modo l'immagine viene ingrandita, senza ricaricare la pagina nel browser. Questo è molto comodo quando abbiamo bisogno di 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 arricciate, ( e ), contengono anche coppie nome/valore separate da virgole.
- Le coppie nome/valore sono costituite dal nome del campo (tra virgolette) seguito da due punti (:) seguiti dal valore del campo specificato.
- I valori in un array o in un oggetto possono essere:
- Numerico (intero o decimale con un punto)
- Stringhe (racchiuse tra virgolette)
- Booleano (vero o falso)
- Altri array (racchiusi tra parentesi quadre [ e ])
- Altri oggetti (avvolti in braccia sagomate ( e ))
- Valore zero(nullo)
Importante! Se usi le virgolette doppie nei valori, esegui l'escape con una barra rovesciata: \". Puoi anche usare 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": "John 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 fiocchi ricci ( e ), che chiariscono che si tratta di un oggetto.
- All'interno dell'oggetto, abbiamo diverse coppie nome/valore:
- "IDordine": 12345- campo denominato orderId e valore 12345
- "shopperName": "John Smith"- campo denominato shopperName e valore John Smith
- " email dell'acquirente": "[e-mail protetta] esempio.com"- proprio come nel campo precedente, qui viene memorizzata l'e-mail dell'acquirente.
- "Contenuti": [ ... ]- un campo denominato content, il cui valore è un array.
- "ordine completato": vero- un campo denominato orderCompleted il cui valore è true
- All'interno dell'array dei contenuti, abbiamo due oggetti che visualizzano il contenuto del carrello. Ogni oggetto prodotto ha tre proprietà: productID, productName, quantity.
Infine, poiché JSON è identico agli oggetti in JavaScript, puoi facilmente prendere questo esempio e creare un oggetto JavaScript da esso:
Confronto tra JSON e XML
Nella maggior parte dei casi, considererai JSON 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 di dati Ajax.
Mentre XML è una tecnologia collaudata che viene 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, solo riscritto in formato XML:
Come puoi vedere, è molte volte più lungo di JSON. Infatti, questo esempio è lungo 1128 caratteri, mentre la versione JSON è lunga solo 323 caratteri. Anche 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?
Quindi arriviamo al 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 quando si sviluppano 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:
Creazionestringhe json, inizi con variabili contenenti alcuni valori, quindi passali attraverso una funzione che trasforma i dati in una stringa JSON.
Letturastringhe json, inizi con una stringa JSON contenente determinati dati, esegui la stringa attraverso una funzione che crea variabili contenenti i dati.
Vediamo come questo è fatto in JavaScript.
Crea una stringa JSON da una variabile JavaScript
JavaScript ha un metodo integrato, JSON.stringify() , che prende una variabile javascript e restituisce una stringa json che rappresenta il contenuto della variabile. Ad esempio, usiamo l'oggetto creato in precedenza, convertiamolo in una stringa JSON.
Ecco cosa verrà visualizzato sullo schermo:
("orderID":12345,"shopperName":"John Smith","shopperEmail":" [e-mail protetta]", "contents":[("productID":34,"productName":"SuperWidget","quantity":1), ("productID":56,"productName":"WonderWidget","quantity":3) ], "ordineCompletato":true)
Si noti che JSON.stringify() genera stringhe JSON senza spazi. Difficile da leggere, ma più compatto, il che è importante durante il trasferimento dei 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(). Prende una stringa JSON e restituisce un oggetto o un array JavaScript contenente i dati JSON. Ecco un esempio:
Qui abbiamo creato una variabile, jsonString, che contiene la stringa JSON dagli esempi forniti in precedenza. Quindi abbiamo passato questa riga attraverso JSON.parse() per creare un oggetto contenente dati JSON, che è memorizzato nella variabile cart. Infine, controlliamo la presenza di dati e visualizziamo alcune informazioni utilizzando la finestra di avviso modale.
Verranno visualizzate le seguenti informazioni:
In una vera applicazione web, il tuo codice JavaScript dovrebbe accettare una stringa JSON come risposta dal server (dopo aver inviato una richiesta AJAX), quindi analizzare la stringa e mostrare all'utente il contenuto del carrello.
Creazione e lettura del formato JSON con PHP
PHP, come JavaScript, ha funzioni che consentono di convertire le variabili in 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:
12345, "shopperName" => "John Smith", "shopperEmail" => " [e-mail protetta]", "contents" => array(array("productID" => 34, "productName" => "SuperWidget", "quantity" => 1), array("productID" => 56, "productName" => " WonderWidget", "quantity" => 3)), "orderCompleted" => true); echo json_encode($cart); ?>
Questo codice restituisce esattamente lo stesso risultato dell'esempio JavaScript: una stringa JSON valida che rappresenta il contenuto delle variabili:
("orderID":12345,"shopperName":"John 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
Simile a quanto sopra, esiste una funzione json_decode() che consente di decodificare le stringhe JSON e inserire i contenuti in variabili.
e-mail dell'acquirente. "
"; echo $carrello->contenuto->NomeProdotto . "
";
?>
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 un array associativo, passa true come secondo parametro alla funzione json_decode(). Ecco un esempio:
$ carrello = json_decode($jsonString, true); echo $carrello["shopperEmail"] . "
"; echo $carrello["contenuto"]["nomeprodotto"] . "
";
Questo produce lo stesso risultato:
[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 hai intenzione di creare un'applicazione web utilizzando la tecnologia Ajax, utilizza sicuramente il formato JSON per scambiare dati tra il server e il browser.
JavaScript Object Notation (JSON) è un formato di testo standard per la rappresentazione di dati strutturati basati sulla sintassi degli oggetti JavaScript. Viene comunemente utilizzato per trasferire dati nelle applicazioni Web (ad esempio, inviare alcuni dati da un server a un client in modo che possano essere visualizzati su una pagina Web o viceversa). Ti imbatterai in questo abbastanza spesso, quindi in questo articolo ti forniamo tutto ciò di cui hai bisogno per lavorare con JSON utilizzando JavaScript, inclusa l'analisi del JSON in modo da poter accedere ai dati al suo interno e creare JSON.
No, davvero, cos'è JSON?
Lo caricheremo nella nostra pagina e utilizzeremo alcune ingegnose manipolazioni del DOM per visualizzarlo, in questo modo:
Ottenere JSON
Per ottenere JSON useremo un'API chiamata XMLHttpRequest (spesso chiamata XHR). Questo è un oggetto JavaScript molto utile che ci consente di effettuare richieste di rete per recuperare risorse dal server tramite JavaScript (ad esempio immagini, testo, JSON, persino frammenti HTML), il che significa che possiamo aggiornare piccole sezioni di contenuto senza dover ricaricare l'intero pagina. Ciò ha portato a pagine Web più reattive e sembra eccitante, ma sfortunatamente esula dallo scopo di questo articolo insegnarlo in modo molto più dettagliato.
- Per cominciare, memorizzeremo l'URL JSON che vogliamo recuperare in una variabile. Aggiungi il seguente codice JavaScript: var requestURL = "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
- Per creare una richiesta, dobbiamo creare una nuova istanza dell'oggetto richiesta dal costruttore XMLHttpRequest utilizzando parola chiave nuovo. Aggiungi la tua ultima riga qui sotto: var request = new XMLHttpRequest();
- Ora dobbiamo aprire una nuova richiesta utilizzando il file . Aggiungi la seguente riga: request.open("GET", requestURL);
Ci vogliono almeno due parametri: ce ne sono altri Opzioni disponibili. Abbiamo solo bisogno di due necessari per questo un semplice esempio:
- Il metodo HTTP da utilizzare quando si effettua una richiesta di rete. In questo caso, va bene, visto che stiamo solo estraendo alcuni semplici dati.
- L'URL per la richiesta è l'URL del file JSON che abbiamo salvato in precedenza.
- Quindi aggiungi le seguenti due righe: qui stiamo impostando su JSON in modo che XHR sappia che il server restituirà JSON e che deve essere convertito dietro le quinte in un oggetto JavaScript. Inviamo quindi la richiesta con il metodo: request.responseType = "json"; Richiesta inviata();
- L'ultima parte di questa sezione prevede l'attesa di una risposta di ritorno dal server e quindi la sua gestione. Aggiungi il seguente codice sotto il codice precedente: request.onload = function() ( var superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); )
Qui memorizziamo la risposta alla nostra richiesta (disponibile nella proprietà) nella variabile superHeroes; questa variabile ora conterrà un oggetto JavaScript basato su JSON! Quindi passiamo questo oggetto a due chiamate di funzione: la prima si riempirà
Abbiamo racchiuso il codice in un gestore di eventi che si attiva quando l'evento load si attiva sull'oggetto richiesta (vedi ) - questo perché l'evento load si attiva quando la risposta ritorna con successo; farlo in questo modo garantisce che request.response sia sicuramente disponibile quando ci mettiamo a provare a fare qualcosa con esso.
Completamento testata
Ora che abbiamo estratto i dati JSON e li abbiamo trasformati in un oggetto JavaScript, approfittiamone scrivendo le due funzioni a cui abbiamo fatto riferimento sopra. Prima di tutto, aggiungi la seguente definizione di funzione sotto il codice precedente:
Funzione populateHeader(jsonObj) ( var myH1 = document.createElement("h1"); myH1.textContent = jsonObj["squadName"]; header.appendChild(myH1); var myPara = document.createElement("p"); myPara. textContent = "Città natale: " + jsonObj["homeTown"] + " // Formato: " + jsonObj["formato"]; header.appendChild(myPara); )
Abbiamo chiamato il parametro jsonObj per ricordarci che questo oggetto JavaScript ha avuto origine da JSON. Qui creiamo prima un elemento
con , impostalo uguale alla proprietà squadName dell'oggetto, quindi aggiungilo all'intestazione con . Eseguiamo quindi un'operazione molto simile su un paragrafo: lo creiamo, ne impostiamo il contenuto testuale e lo aggiungiamo all'intestazione. L'unica differenza è che il suo testo è dato come una stringa concatenata contenente sia la homeTown che le proprietà formate dell'oggetto.
Creazione di schede informative sugli eroi
Poi aggiungi prossima funzione in fondo al codice che crea e visualizza le carte dei supereroi:
Funzione showHeroes(jsonObj) ( var heroes = jsonObj["members"]; for (var i = 0; i< heroes.length; i++) { var myArticle = document.createElement("article"); var myH2 = document.createElement("h2"); var myPara1 = document.createElement("p"); var myPara2 = document.createElement("p"); var myPara3 = document.createElement("p"); var myList = document.createElement("ul"); myH2.textContent = heroes[i].name; myPara1.textContent = "Secret identity: " + heroes[i].secretIdentity; myPara2.textContent = "Age: " + heroes[i].age; myPara3.textContent = "Superpowers:"; var superPowers = heroes[i].powers; for (var j = 0; j < superPowers.length; j++) { var listItem = document.createElement("li"); listItem.textContent = superPowers[j]; myList.appendChild(listItem); } myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); section.appendChild(myArticle); } }
Per prima cosa, memorizziamo la proprietà members dell'oggetto JavaScript in una nuova variabile. Questo array contiene diversi oggetti che contengono informazioni per ogni eroe.
Quindi usiamo per scorrere ogni oggetto nell'array. Per ciascuno di essi:
- Creiamo alcuni nuovi elementi:
, , tre
E
- .
- Installazione
per contenere il nome dell'eroe attuale.
- Riempiamo tre paragrafi con la nostra identità segreta, l'età e una riga che dice "Superpoteri:" per inserire informazioni nell'elenco.
- Memorizziamo la proprietà powers in un'altra nuova variabile chiamata superPowers, che contiene un array che elenca i superpoteri dell'eroe attuale.
- Usiamo un altro ciclo for per passare in rassegna i superpoteri dell'eroe attuale: per ciascuno di essi creiamo un elemento
- , inserisci i superpoteri, quindi inserisci listItem all'interno dell'elemento
- (myList) con appendChild() .
- L'ultima cosa che facciamo è aggiungere
,
E
- dentro
(myArticle) e quindi aggiungere v . L'ordine in cui vengono aggiunte le cose è importante, poiché questo è l'ordine in cui appariranno all'interno dell'HTML.
Nota. Se hai difficoltà a seguire la notazione punto/parentesi che usiamo per accedere a un oggetto JavaScript, potrebbe essere utile aprire il file superheroes.json in un'altra scheda o in editor di testo e fai riferimento ad esso quando guardi il nostro JavaScript. Puoi anche fare riferimento al nostro articolo per Informazioni aggiuntive sulla notazione di punti e parentesi.
Conversione tra oggetti e testo
L'esempio precedente era semplice in termini di accesso a un oggetto JavaScript perché abbiamo effettuato una richiesta XHR per convertire direttamente la risposta JSON in un oggetto JavaScript utilizzando.
JSON (JavaScript Object Notation) è un formato di trasferimento dati. Come suggerisce il nome, il formato è basato sul linguaggio di programmazione JavaScript, ma è disponibile anche in altri linguaggi (Python, Ruby, PHP, Java).
JSON utilizza l'estensione .json. Quando viene utilizzato in altri formati di file(ad es. .html) La stringa JSON è quotata o assegnata a una variabile. Questo formato è facilmente trasferibile tra un server Web e un client o un browser.
Leggero e facile da capire, JSON è un'ottima alternativa a XML.
Questa guida ti introdurrà ai vantaggi, alle strutture, struttura complessiva e la sintassi JSON.
Sintassi e struttura JSON
L'oggetto JSON ha la forma di un valore-chiave e di solito è scritto tra parentesi graffe. Quando si lavora con JSON, tutti gli oggetti vengono archiviati in un file .json, ma possono esistere anche come oggetti separati nel contesto di un programma.
L'oggetto JSON ha questo aspetto:
"nome_nome": "Giovanni",
"cognome": "Smith",
"posizione": "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, che sono racchiuse tra parentesi graffe. La maggior parte dei dati in JSON è scritta come oggetti.
I due punti vengono inseriti tra la chiave e il valore. 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. 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 esserci problemi di accesso a tale chiave. Pertanto, invece di uno spazio, è meglio utilizzare un carattere di sottolineatura ("first_name").
I valori JSON si trovano sul lato destro della colonna. Qualsiasi tipo di dato 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 è una stringa, verrà quotato tra virgolette e se un numero, non lo sarà.
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 generalmente scritti su un altro tipo di file.
Scrivendo dati JSON in una colonna, migliori la leggibilità del file (soprattutto se ci sono molti dati nel file). JSON ignora gli spazi tra le colonne, quindi puoi utilizzarli per suddividere i dati in un numero di colonne leggibile dall'uomo.
"nome_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 diffusi, 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ò archiviare 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 nidificato che, a sua volta, consiste anch'esso di chiavi e valori.
Nota: il primo oggetto JSON nidificato è evidenziato in rosso.
"John" :(
"nomeutente": "Giovanni",
"posizione": "Londra",
"in linea": vero
"seguaci": 987
"jesse" :(
"nome utente": "Jesse",
"posizione": "Washington",
"in linea": falso
"seguaci": 432
"ha disegnato" :(
"nomeutente": "Drew",
"posizione": "Parigi",
"in linea": falso
"seguaci": 321
"Jamie" :(
"nome utente": "Jamie",
"posizione": "Berlino",
"in linea": vero
"seguaci": 654
Si noti 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.
Matrici nidificate
I dati possono essere incorporati in JSON utilizzando array JavaScript, che verranno passati come valori. JavaScript utilizza le 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 il trasferimento un largo numero dati che possono essere raggruppati. Ad esempio, proviamo a registrare i dati dell'utente.
{
"nome_nome": "Giovanni",
"cognome": "Smith",
"posizione": "Londra",
"siti web": [
"descrizione": "lavoro",
"URL": "https://www.johnsmithsite.com/"
},
{
"descrizione": "tutorial",
"URL": "https://www.johnsmithsite.com/tutorials"
"social" : [
"descrizione": "twitter",
"collegamento": "https://twitter.com/johnsmith"
"descrizione": "facebook",
"collegamento": "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.
Con matrici e oggetti nidificati, puoi creare una complessa gerarchia di dati.
JSON o XML?
XML (eXtensible Markup Language) consente di archiviare i dati in una forma comoda per la percezione umana e della macchina. 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
utenti.json
("utenti": [
("username" : "John", "location" : "London"),
("nome utente" : "Jesse", "posizione" : "Washington"),
("username" : "Drew", "location" : "Paris"),
("username" : "JamieMantisShrimp", "location" : "Berlin")
JSON è un formato molto compatto e non richiede tanti tag come XML. Inoltre, XML, a differenza di JSON, non supporta gli array.
Se hai familiarità con l'HTML, lo noterai Formato XML molto simile ad esso (in particolare i tag). JSON è più semplice, richiede meno testo ed è più facile da usare, ad esempio, nelle applicazioni AJAX.
Naturalmente, il formato deve 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.
Ulteriori informazioni sulla compatibilità e la gestione di JSON sono disponibili 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 CSV o dati delimitati da tabulazioni in JSON con strumento aperto Sig. 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 di dati semplice e leggero. I file JSON sono facili da trasferire, archiviare e utilizzare.
Oggi, JSON viene spesso utilizzato nelle API.
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 semplice sintassi, puoi facilmente archiviare qualsiasi cosa, da un singolo numero a stringhe, array e oggetti in testo normale. È inoltre possibile collegare insieme array e oggetti per creare strutture di dati complesse.
Una volta creata una stringa JSON, è facile inviarla a un'altra applicazione o a un'altra posizione sulla rete perché è testo normale.
JSON ha i seguenti vantaggi:
- È compatto.
- Le sue frasi sono facili da leggere e comporre sia dall'uomo che dal 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 hanno funzioni e librerie per leggere e creare strutture JSON.
Il nome JSON sta per JavaScript Object Notation (rappresentazione di oggetti JavaScript). Come rappresenta il nome, si basa sul modo in cui gli oggetti sono definiti (molto simile alla creazione di array associativi in altri linguaggi) e sugli array.
A cosa serve JSON?
L'uso più comune di JSON è l'invio di 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 codice 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 tramite le richieste AJAX può essere semplificato. Ad esempio, l'ID prodotto può essere incluso in Indirizzo URL come parte di una richiesta GET.
La libreria jQuery ha 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 di coppie nome/valore separate da virgole.
- coppia nome/valore consiste nel nome del campo racchiuso tra doppi apici, seguito da due punti (:) e dal valore del campo.
- Senso in un array o un oggetto può essere:
- Numero (intero o in virgola mobile)
- Stringa (tra virgolette)
- Valore booleano (vero o falso)
- Un altro array (racchiuso tra parentesi quadre)
- Un altro oggetto (racchiuso tra parentesi graffe)
- valore nullo
Per includere le virgolette doppie in una stringa, devi utilizzare una barra rovesciata: \" . Proprio come in molti linguaggi di programmazione, puoi 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 nel dettaglio la linea:
- Creiamo un oggetto usando 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 gli elementi pubblicitari nell'ordine. Ogni oggetto contiene 3 proprietà: productID , productName e quantity .
A proposito, poiché JSON si basa sulla dichiarazione di oggetti JavaScript, puoi trasformare rapidamente e facilmente la stringa JSON sopra in un oggetto JavaScript:
Confronto tra JSON e XML
In molti modi, puoi considerare JSON 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 di dati AJAX.
Mentre XML è una tecnologia collaudata che è stata utilizzata in un discreto numero di applicazioni, JSON ha il vantaggio di essere un formato di dati più compatto e più facile da riconoscere.
Ecco come apparirebbe l'esempio di oggetto XML sopra:
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.
Certo, questo è un esempio radicale. Ed è possibile creare una voce XML più compatta. Ma anche sarà significativamente più lungo dell'equivalente JSON.
Lavorare con la stringa JSON in JavaScript
JSON ha un formato semplice, ma la creazione manuale di una stringa JSON è piuttosto noiosa. Inoltre, spesso è necessario prendere una stringa JSON, 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, quindi creiamo una stringa JSON da esso:
Questo codice darà:
Si noti 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. Prende una stringa JSON e restituisce un oggetto o un array JavaScript che contiene i dati. Per esempio:
Abbiamo creato una variabile jsonString che contiene la stringa JSON del nostro esempio di ordine. Quindi passiamo questa stringa al metodo JSON.parse(), che crea un oggetto contenente i dati JSON e lo memorizza nella variabile cart. Tutto quello 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 visualizzarli 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, ha funzioni integrate per lavorare con le 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:
12345, "shopperName" => "Vanja Ivanov", "shopperEmail" => " [e-mail protetta]", "contents" => array(array("productID" => 34, "productName" => "Super Prodotto", "quantity" => 1), array("productID" => 56, "productName" => "miracle product", "quantity" => 3)), "orderCompleted" => true); echo json_encode($cart); ?>
Codice dato 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":"Wonder Product","quantity": 3)],"orderCompleted":true)
In una vera applicazione, il tuo script PHP invierà linea data JSON come parte della risposta AJAX al browser, dove il codice JavaScript utilizza il metodo JSON.parse() per riconvertirlo 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:
e-mail dell'acquirente. "
"; echo $carrello->contenuto->NomeProdotto . "
";
?>
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 di classe stdClass . Ecco perché usiamo -> per accedere alle proprietà dell'oggetto nell'esempio precedente.
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["shopperEmail"] . "
"; 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 i numeri interi di grandi dimensioni.
Conclusione
Sebbene JSON sia facile da capire e da usare, è uno strumento molto utile e flessibile per il trasferimento di dati tra applicazioni e computer, soprattutto quando si utilizza AJAX. Se hai intenzione di sviluppare un'applicazione AJAX, allora non c'è dubbio che JSON sarà lo strumento più importante nel tuo laboratorio.
