Lezione #id-jd-2013-0011#
Il parsing o analisi sintattica è la capacità di analizzare una data grammatica formale di una struttura di dati.
JQuery tramite il metodo getJSON() esegue automaticamente il parsing delle informazioni JSON. Questo ci permette di caricare con una sola istruzione i dati JSON ed utilizzarli nella nostra pagina web.
Creiamo il file “id-jq-2013-0011.json”:
{"users":[
{
"firstName":"Andrea",
"lastName":"Tonin",
"joined": {
"month":"January",
"day":12,
"year":2012
}
},
{
"firstName":"Riccardo",
"lastName":"Santato",
"joined": {
"month":"April",
"day":28,
"year":2010
}
}
]}
Come si può evincere dall’analisi del codice trattasi di un tipico array json.
Scriviamo un nuovo documento “id-jq-2013-0011.html”:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
</head>
<body>
<div id="segnaposto"></div>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script>
$.getJSON('id-jq-2013-0011.json', function(data) {
var output="<ul>";
for (var i in data.users) {
output+="<li>" + data.users[i].firstName + " " + data.users[i].lastName + "--" + data.users[i].joined.month+"</li>";
}
output+="</ul>";
document.getElementById("segnaposto").innerHTML=output;
});
</script>
</body>
</html>
Notare che lo script javascript deve essere caricato obbligatoriamente dopo l’elemento div con id=segnaposto, che lo script andrà successivamente a riempire.
Analizziamo una riga per volta:
$.getJSON('id-jq-2013-0011.json', function(data) {
JQuery richiamato dal simbolo dollaro $ carica il file ‘id-jq-2013-0011.json’ e fa partire la funzione.
JQuery ha già effettuato il parsing, cioè ha letto i dati del file json ed ha creato un array pronto per essere utilizzato in javascript.
output="<ul>" ... output+="<li>" ... output+="</ul>";...
Genero semplicemente un elenco puntato
data.users[i].firstName
Preleva dall’array, alla voce “users” la proprietà “firstname”.
data.users[i].lastName
Preleva dall’array, alla voce “users” la proprietà “lastname”.
data.users[i].joined.month
Preleva dall’array, alla voce “users”>”joined” la proprietà “month”.
document.getElementById("segnaposto").innerHTML=output;
Dal presente documento ottiene l’elemento con id=segnaposto e copia all’interno – innerHTML=output – il risultato delle operazioni eseguite.
