Corsi on-line

Parsing di un file JSON con JQuery

Riprendiamo un argomento precedentemente trattato in un altro post per proporre una procedura alternativa; questa volta infatti il parsing verrà eseguito tramite la lettura di un file esterno contenente la notazione JSON (JavaScript Object Notation), mentre per l’accesso ad esso non verrà utilizzato puro codice JavaScript ma il framework jQuery. Si noti anche come lo script utilizzato come esempio non sia destinato a stampare gli output all’interno di un elemento HTML preesistente, ma a produrlo dinamicamente.

jsonSi ipotizzi quindi di voler leggere il contenuto di un file chiamato nel caso specifico agenda.json e basato sul noto formato per l’interscambio dei dati tra Web applications:

[ 
  { "Nome" : "Edna", "Cognome" : "Caprapall" },
  { "Nome" : "Barney", "Cognome" : "Gumble" },
  { "Nome" : "Timothy", "Cognome" : "Lovejoy" }
]

Una prima modalità per accedere ai dati esposti potrebbe essere basata sull’impiego del metodo $.each() di jQuery che è stato concepito per effettuare dei cicli d’iterazione basati sul DOM  di una pagina Web. Quando chiamato, questo metodo itera gli elementi del Document Object Model che sono parte di un oggetto jQuery. Nell’esempio, il ciclo preposto a rendere visibili le informazioni contenute nel file JSON verrà scatenato da un comportamento dell’utente, cioè la pressione su un pulsante che verrà rimosso tramite la funzione remove() al verificarsi dell’evento previsto:

$(document).ready(function(){
$('#button_send').on('click', function () {
$.ajax({ 
    type: 'POST', 
    url: 'agenda.json', 
    data: { get_param: 'value' }, 
    dataType: 'json',
    success: function (data) { 
        $( "#send" ).remove();
        $.each(data, function(index, element) {
            $('body').append($('<div>', {
                text: element.Nome + " " + element.Cognome
            }));
        });
    }
});
});
});

Come sempre, proponiamo per intero il codice della pagina index.html nella quale è contenuto lo script per il parsing; ricordiamo ancora una volta che l’adozione di jquery-latest.js è giustificata solo in ambito di sviluppo e andrebbe invece evitata in un progetto in produzione sul Web:

<!DOCTYPE html>
<html>
<head>
<title>Parsing di un file JSON con JQuery</title>
<body>
<div id="send">
<input type="button" value="Invia" id="button_send" />
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$('#button_send').on('click', function () {
$.ajax({ 
    type: 'POST', 
    url: 'agenda.json', 
    data: { get_param: 'value' }, 
    dataType: 'json',
    success: function (data) { 
        $( "#send" ).remove();
        $.each(data, function(index, element) {
            $('body').append($('<div>', {
                text: element.Nome + " " + element.Cognome
            }));
        });
    }
});
});
});
</script>
</body>
</html>

In alternativa, è possibile ottenere lo stesso risultato sfruttando un altro metodo di jQuery, $.getJSON(), che permetterà di accedere a dati in notazione JSON tramite un’HTTP GET request operata via AJAX:

$(document).ready(function(){
$('#button_send').on('click', function () {
$( "#send" ).remove();
$.getJSON('agenda.json', { get_param: 'value' }, function(data) {
    $.each(data, function(index, element) {
        $('body').append($('<div>', {
            text: element.Nome + ' ' + element.Cognome
        }));
    });
});
});
});

Lo sviluppatore potrà scegliere la soluzione più adatta alle proprie esigenze tra $.each() o $.getJSON(), in ogni caso il vantaggio ottenuto sarà quello di poter lavorare unicamente lato client.

Post correlati
I più letti del mese
Tematiche