Javascript Object Notation – Formato File
Javascript Object Notation – Formato File, scopriamo insieme il significato.
JSON è un formato di scambio di dati leggero che rappresenta un’interessante alternativa alle soluzioni basate su XML.
Ha una struttura chiara e leggibile dall’uomo e può essere elaborata da molti linguaggi di programmazione popolari.
JSON viene utilizzato per trasferire informazioni dal server all’applicazione client. Un tipico caso d’uso sono i siti Web basati su AJAX.
Javascript Object Notation
Nel seguente articolo, descriveremo le basi dell’utilizzo di JSON in una semplice applicazione basata su JavaScript. Inizieremo definendo la struttura dei dati, ovvero il file JSON posizionato sul server.
ESEMPIO
Creeremo un documento denominato data.json e inseriremo il seguente contenuto:
{“prodotti”:
[
{ “name”:”Corso JavaScript”,
“prezzo”:”EUR 79″,
“categoria”:”Internet”
},
{ “name”:”corso jQuery”,
“prezzo”:”EUR 57″,
“categoria”:”Internet”
}
]
}
Qui abbiamo a che fare con una struttura semplice che memorizza informazioni su due prodotti. Definiamo tutti i dati sotto forma di una coppia chiave-valore. L’elemento padre è la chiave dei prodotti e il suo valore è un array con informazioni sui prodotti. Ogni prodotto contiene tre paia che ne descrivono le proprietà: nome, prezzo e categoria. È chiaro che JSON consente l’utilizzo di strutture semplici e leggibili.
La definizione degli stessi dati utilizzando XML richiederebbe molto markup, il che si tradurrebbe in una dimensione del file maggiore.
Nelle tipiche applicazioni Internet, questo è di grande importanza.
Javascript Object Notation: proviamo a elaborare questi dati sul lato client
Creeremo un semplice documento HTML e vi aggiungeremo uno script che leggerà i dati da un file JSON. Per semplicità, supponiamo che sia il documento HTML che il file JSON si trovino nella stessa directory sul server. In pratica, possiamo preparare dati JSON, ad esempio utilizzando PHP o una tecnologia simile.
Ora diamo un’occhiata al codice dello script:
Dati JSON
$.getJSON(‘dati.json’, funzione(dati) {
var output = “
- ” + dati.prodotti[i].name + “
- ” + dati.prodotti[i].price + “
- “ + dati.prodotti[i].category + “
“;
document.getElementById(‘content’).innerHTML = output;
});
Utilizziamo la popolare libreria jQuery, con la quale saremo in grado di elaborare facilmente i dati dal file.
$.getJSON(‘dati.json’, funzione(dati) {
/* codice elaborazione dati */
});
La funzione getJSON accetta due argomenti:
- il nome del file di dati (es. data.json)
- una funzione che elaborerà questi dati (l’argomento dati è ovviamente dati dal file).
Usiamo un ciclo che genererà un elenco puntato e lo inserirà nella struttura del documento HTML. In primo luogo, ci riferiamo all’elemento esterno: data.products. Quindi, per ogni articolo della lista, inseriamo le informazioni sul prodotto. Utilizziamo la tipica notazione a punti orientata agli oggetti (ad es. data.products[i].name).
È chiaro che l’elaborazione dei dati JSON con JavaScript/jQuery è molto semplice. Possiamo fare riferimento a qualsiasi valore nel file utilizzando una piccola quantità di codice.
Cosa è necessario per programmare in JavaScript?
Il codice JavaScript viene eseguito nel browser. Non abbiamo bisogno di nient’altro che un normale browser, ad esempio Google Chrome o Mozilla Firefox. Google Chrome è il browser più popolare e supporta le soluzioni più recenti, ma ai fini di questo corso puoi utilizzare uno qualsiasi dei tuoi browser Web preferiti.
Puoi scrivere codice JavaScript in un normale taccuino, ma ti consiglio un taccuino per sviluppatori, ad esempio Notepad++ o Visual Studio Code. Questi sono programmi gratuiti che prima o poi utilizzerai se sei interessato alla programmazione. Tali programmi colorano la sintassi e rendono la programmazione più efficiente per molte altre ragioni.
Il codice JavaScript è un’aggiunta ai siti Web e alle applicazioni Web, quindi è necessaria almeno una conoscenza minima di come creare semplici pagine HTML. JavaScript è un’aggiunta ai siti Web che inseriamo nei tag. Il secondo approccio è più professionale e rende il codice più leggibile, ma il codice inserito nei tag.
