Corsi on-line

Parsing JSON con JavaScript

Il formato d’interscambio JSON (JavaScript Object Notation) viene utilizzato in modo abbastanza frequente per la lettura di dati da visualizzare all’interno di una pagina Internet; se si desidera effettuare tale operazione esclusivamente lato client, e quindi escludendo il ricorso a linguaggi server side come per esempio PHP, è possibile fare ricorso a JavaScript che per questo scopo mette a disposizione la funzione denominata JSON.parse().

jsonQuest’ultima accetta come argomento un stringa in notazione JSON grazie alla quale generare un oggetto JavaScript. Per spiegare meglio questa dinamica è possibile partire da un semplice esempio che consiste innanzitutto nel definire una variabile JavaScript valorizzata tramite una serie di dati espressi nel formato previsto per JSON:

var json = '{"mammiferi":[' +
'{"nomeComune":"Cercopiteco di Hamlyn","nomeScientifico":"Cercopithecus hamlyni" },' +
'{"nomeComune":"Microcebo di Goodman","nomeScientifico":"Microcebus lehilahytsara" },' +
'{"nomeComune":"Bradipo pigmeo","nomeScientifico":"Bradypus pygmaeus" }]}';

A questo punto la variabile json potrà essere passata come parametro alla funzione JSON.parse(), scopo del codice seguente sarà quello di estrarre il secondo record presente nel listato precedentemente proposto:

obj = JSON.parse(json);
document.getElementById("js").innerHTML =
obj.mammiferi[1].nomeComune + " altrimenti detto <em>" + obj.mammiferi[1].nomeScientifico + "</em>.";

L’output generato farà riferimento all’indice “1” perché l’indicizzazione dei record avviene come nel caso degli array, seguendo un ordinamento automatico che va da “0 ad n“, avremo quindi il primo record con indice “0”, il secondo (quello estratto dal nostro script) associato all’indice “1” e così via.

Microcebo di Goodman altrimenti detto <em>Microcebus lehilahytsara</em>.

Anche in questo caso riportiamo il codice completo dell’applicazione realizzata perché risulti più facilmente leggibile:

<!DOCTYPE html>
<html>
<head>
<title>Parsing JSON con JavaScript</title>
</head>
<body>
<h2>Generazione di un oggetto JavaScript da stringa JSON</h2>
<script>
var json = '{"mammiferi":[' +
'{"nomeComune":"Cercopiteco di Hamlyn","nomeScientifico":"Cercopithecus hamlyni" },' +
'{"nomeComune":"Microcebo di Goodman","nomeScientifico":"Microcebus lehilahytsara" },' +
'{"nomeComune":"Bradipo pigmeo","nomeScientifico":"Bradypus pygmaeus" }]}';
obj = JSON.parse(json);
document.getElementById("js").innerHTML =
obj.mammiferi[1].nomeComune + " altrimenti detto <em>" + obj.mammiferi[1].nomeScientifico + "</em>.";
</script>
</body>
</html>

Si ricordi che JSON.parse() non è supportata dai browser Web più datati, questi ultimi richiederanno invece l’utilizzo della funzione eval() nel modo seguente:

var obj = eval ("(" + json+ ")");

per l’ottenimento del medesimo risultato.

Post correlati
I più letti del mese
Tematiche