Nella precedente lezione abbiamo accennato il parsing JSON e abbiamo già detto che JSON è un formato testuale indipendente dal linguaggio utilizzato e anche molto semplice da capire.
Quasi tutti i browser ormai offrono un oggetto JSON nativo, può succedere però che, se si utilizzano alcune versioni di browser molto vecchie, non si disponga di questo oggetto. In tal caso occorre lavorare in un altro modo. Ma c’è da dire che oggi è un’eventualità molto remota.
Affrontiamo nel dettaglio il parsing JSON, comparando il formato testuale di JSON con gli oggetti in JavaScript.
I dati in JSON, così come gli oggetti in JavaScript, sono rappresentati da una coppia chiave: valore, dove il carattere due punti ( : ) funge da operatore di assegnazione.
Infatti ricordiamo che in JavaScript abbiamo scritto i nostri oggetti in questo modo:
var persona = {nome:'Coding',cognome:'Creativo',anni:30};
In JSON sono necessarie le virgolette sia per la chiave, sia per il valore.
Dunque dovrei scrivere:
var persona = '{"nome":"Coding","cognome":"Creativo","anni":30}';
Inoltre, così come per gli oggetti in JavaScript, JSON permette di utilizzare la struttura dati array.
Parsing JSON
var oggettoPersona = JSON.parse(persona);
console.log(oggettoPersona);
Facendo il console.log otteniamo la conversione in oggetto JavaScript.
Array di valori con JSON
Facciamo dunque un altro esempio creando un oggetto persone che contiene delle chiavi persona1, persona2 alle quali è assegnato un valore di tipo array. Ciascun array contiene poi un oggetto con altre coppie chiave:valore. Ecco di seguito il nostro esempio:
JSON stringify è un metodo che serve a convertire un oggetto o un valore JavaScript in una stringa JSON.
Abbiamo già detto che il formato JSON è utilizzato per lo scambio di informazioni da o verso un server web.
Nella lezione precedente abbiamo visto il funzionamento del metodo JSON.parse per fare esattamente l’opposto di quanto vedremo in questa lezione. Questo metodo serve infatti a prendere un dato da un server web e renderlo utilizzabile lato JavaScript.
In questa lezione studieremo invece come inviare dati ad un server web, ad esempio convertendo un oggetto esistente. Per ottenere questo servirà il metodo JSON.stringify.
Sintassi di JSON stringify
La sintassi di questo metodo è la seguente:
JSON.stringify(valore[,replacer[,space]]);
Dove valore rappresenta l’oggetto da convertire in stringa, mentre replacer è un parametro opzionale che rappresenta una funzione oppure un array che consente di modificare le proprietà dell’oggetto da convertire.
Infine space è utilizzato per inserire ad esempio uno spazio bianco nella stringa JSON e dunque rendere l’output più leggibile.
Esempio di JSON stringify
Prendiamo come esempio l’oggetto JavaScript automobile e lo visualizziamo attraverso il console.log.
Richiamiamo poi il metodo stringify sull’oggetto creato.
var stringaJson = JSON.stringify(automobile);
console.log(stringaJson);
In questo modo abbiamo ottenuto una conversione dell’oggetto a stringa, come possiamo vedere nella nostra console:
Esempio con i parametri opzionali di JSON stringify
Così come abbiamo visto nell’esempio presentato nella scorsa lezione, nel quale aggiungevamo all’oggetto degli elementi attraverso una funzione, anche nel nostro caso possiamo modificare il nostro oggetto prima di convertirlo in stringa.
Dunque di seguito il codice:
var elementi = {
A : "Coding",
B: "Creativo"
};
var oggettoElemento = JSON.stringify(elementi, function (key, value) {
if(key == "A")
return "Coding Creativo";
return value;
});
console.log(oggettoElemento);
Infine per creare lo spazio e aumentare la leggibilità della stringa JSON, aggiungiamo uno spazio vuoto. Dunque basta scrivere in questo modo:
var oggettoElemento = JSON.stringify(elementi, function (key, value) {
if(key == "A")
return "Coding Creativo";
return value;
}, ' ');
Ecco in figura l’output prodotto:
In questa lezione abbiamo visto il metodo JSON stringify, nelle prossime vedremo altri esempi.
Il metodo JSON.parse serve ad analizzare il formato testuale (stringa) di JSON e a costruire il valore JavaScript o l’oggetto. Il valore di ritorno è dunque l’oggetto che corrisponde al parametro stringa passato.
Si dice anche che è un metodo per la de-serializzazione.
Se la stringa JSON non è valida genera un’eccezione di tipo SyntaxError, come si vede nella figura sotto:
Sintassi JSON parse
La sintassi di questo metodo è la seguente:
JSON.parse(stringa[, reviver])
Dove stringa rappresenta la stringa JSON da analizzare, mentre reviver è un parametro opzionale e permette di indicare come verrà convertito il valore.
Primo esempio JSON parse
Supponiamo ad esempio di avere questa stringa JSON, rappresentata semplicemente da una coppia chiave:valore.
Facciamo poi il console.log del tipo di dato che restituisce.
var persona = '{"nome": "Coding Creativo"}';
console.log(typeof(persona));
Nella nostra console noteremo che verrà visualizzato il tipo di dato string.
Adesso proviamo a fare il parse e poi nuovamente il console.log del tipo di dato, in questo modo:
persona = JSON.parse(persona);
console.log(typeof(persona));
Se adesso andiamo a guardare nella nostra console, abbiamo un oggetto:
Potevamo scrivere tutto in un unico passaggio, in questo modo:
Ecco la figura che rappresenta tutte e tre le nostre situazioni:
Quindi come abbiamo notato nei primi due casi, dopo aver fatto il parsing, non otteniamo un oggetto, ma difficilmente troveremo un formato JSON che corrisponde ad una sola stringa oppure ad un numero.
Allo stesso modo posso usare anche i valori booleani.
Riprendiamo adesso l’esempio visto nella lezione precedente. Dunque il seguente formato JSON:
var automobile = `{"marca":"Fiat",
"modello":"500",
"colore":"bianco",
"alimentazione":"benzina",
"anno":"2010"
}`;
Quindi adesso lo dobbiamo convertire in oggetto JavaScript. Per farlo utilizziamo il metodo JSON.parse sull’oggetto automobile creato. Dunque scriviamo:
var oggettoAutomobile = JSON.parse(automobile);
console.log(oggettoAutomobile);
Se visualizziamo la nostra console vedremo il nostro oggetto automobile.
Inoltre, dato che è un oggetto, possiamo richiamare le proprietà in questo modo:
console.log(oggettoAutomobile.marca);
Parametro opzionale reviver di JSON parse
Facciamo adesso un esempio di utilizzo del parametro opzionale reviver.
Costruiamo un semplice JSON che contiene due coppie chiave-valore come nel codice sotto:
var elementi = '{"A": "Coding", "B": "Creativo"}';
Poi utilizziamo il metodo parse per convertire la stringa in oggetto e una funzione che prende i valori della chiave A e li sostituisce con quanto indicato nel return.
var oggettoElemento = JSON.parse(elementi, function (key, value) {
if(key == "A")
return "Coding Creativo";
return value;
});
In questa lezione abbiamo effettuato alcuni esempi con il metodo JSON.parse, nella prossima lezione continueremo ad approfondire questo metodo, prima di passare ad altri metodi.
JSON è un formato utilizzato per lo scambio dei dati ed è l’acronimo di JavaScript Object Notation.
È basato sul linguaggio JavaScript e viene utilizzato molto per la programmazione asincrona, dunque con ajax, come vedremo nelle prossime lezioni.
JSON è un formato testuale, quindi è una stringa. Permette di aggregare i dati e segue la sintassi degli oggetti JavaScript.
Ma può essere utilizzato indipendentemente da JavaScript, infatti molti linguaggi di programmazione lo utilizzano e dunque consentono anche di fare il parse.
Un oggetto JSON si crea utilizzando una coppia di parentesi graffe che servono a contenere tutto l’oggetto. Dopo, all’interno di queste parentesi, si inseriscono le varie proprietà indicando delle coppie chiave-valore e facendo attenzione ad usare le doppie virgolette sia per la chiave sia per il valore. Ogni proprietà dell’oggetto è separata da una virgola.
I dati json sono descritti come coppie chiave-valore, in questo esempio abbiamo un oggetto auto con alcune proprietà, come ad esempio: tyoe, model, color, ecc.
L’oggetto JSON può essere ancora più complesso, come ad esempio questa API:
Facciamo un esempio di utilizzo di JSON con JavaScript. Prendiamo dunque il nostro solito oggetto auto e lo scriviamo come un oggetto JSON, ricordando che è una stringa.
Dato che è una stringa possiamo utilizzare il semplice apice o il doppio apice, senza andare a capo. Oppure si può utilizzare il backtick (`) cioè l’apice retro-verso. Per ottenere l’apice retro-verso basta tenere premuto il tasto ALT e contemporaneamente sul tastierino numerico i numeri 0096.
Vediamo dunque un oggetto JSON scritto utilizzando i backtick:
var automobile = `{"marca":"Fiat",
"modello":"500",
"colore":"bianco",
"alimentazione":"benzina",
"anno":"2010"
}`;
e senza:
var automobile = '{
"marca":"Fiat",
"modello":"500",
"colore":"bianco",
"alimentazione":"benzina",
"anno":"2010"
}';
O ancora in alternativa è possibile unire le stringhe con l’operatore +, come da esempio sotto:
In questo modo nella console vedremo in ordine inverso il contenuto dell’array di partenza.
reverse JavaScript – secondo esempio
Ordinare un array di numeri e dopo invertirlo utilizzando il metodo reverse().
Quindi questa volta prendiamo in input un array di numeri, come da esempio sotto:
var numeri = [5,4,3,2,6,9,62];
Ricordiamo anche che per poter effettuare un ordinamento numerico di un array dobbiamo utilizzare la sintassi nomeArray.sort(funzione di confronto), come spiegato in questa lezione: sort javascript.
Quindi lo ordiniamo seguendo le specifiche indicate nella precedente lezione:
numeri.sort(function(a, b) {
return a - b;
});
Infine applichiamo il metodo reverse di JavaScript e visualizziamo il risultato, per comodità, nella console del nostro browser.
numeri.reverse();
console.log(numeri);
Se riflettiamo in questo caso si poteva ottenere lo stesso risultato semplicemente effettuando un ordinamento decrescente dell’array di partenza.
Di seguito vi presento quindi una possibile soluzione alternativa all’algoritmo proposto che non utilizza il metodo reverse di JavaScript.
var numeri = [5,4,3,2,6,9,62];
numeri.sort(function(a, b) {
return b - a;
});
console.log(numeri);
In questa lezione abbiamo semplicemente visto dei semplicissimi esempi d’utilizzo del metodo reverse di JavaScript. Nelle prossime lezioni affronteremo ancora altri metodi, attraverso lo studio di esempi pratici.
