Appunti e tutorial su front-end web technology

Andiamo a leggere un file xml e a visualizzare i dati all’interno di una tabella.
Come prima cosa prepariamo l’html:
il div da utlizzare come avviso durante il caricamento con ajax che verrà nascosto dal css:

<div id="loader"><img alt="" src="http://www.lorenzodeambrosis.net/blog/2012/10/jquery-parsing-xml/images/ajax_loader.gif" /></div>

e la tabella dove andremo a visualizzare i dati:

<table id="lista">
	<thead>
    	<tr>
        	<th>Titolo</th>
        	<th>Link</th>
        	<th>Autore</th>
        </tr>
    </thead>
    <tr class="template">
    	<td><span class="item_titolo"></span></td>
    	<td><span class="item_link"></span></td>
    	<td><span class="item_autore"></span></td>
    </tr>
</table>

La prima riga della tabella contiene l’intestazione della stessa,
la seconda una riga “template”, nascosta dal css che verrà clonata nel corso della lettura del file xml

Rapidamente la struttura della nostra fonte di dati:

Al document.ready partirà la chiamata ajax come di consueto:

$.ajax({
type:’GET’,
url:’data/news2.xml’,
dataType:’xml’,
success:function(str_xml){
…
}
})

e una volta ricevuti i dati procediamo con il ciclo di lettura:


$(str_xml).find(‘item’).each(function(){
var titolo=$(this).find(‘titolo’).text();
var miolink=$(this).find(‘link’).text();
var autore=$(this).find(‘autore’).text();

e a questo prunto prepariamo l’output clonando il template e rimuovendo la class per renderlo visibile

var newRow=$(‘#lista .template’).clone().removeClass(‘template’);

prepariamo un oggetto litteral con i dati da iniettare nella nuova riga:

var listaItem={titolo:titolo, varlink:miolink, varautore:autore};

infine popoliamo e appendiamo la nostra riga:

popola_template(newRow, listaItem).appendTo(‘#lista’).fadeIn();

la funzione popola_template cerca i tag span dove andare a scrivere i contenuti dell’oggetto passato
e restituisce l’oggetto jQuery da appendere:

function popola_template(row, lista){
row.find(‘.item_titolo’).text(lista.titolo);
row.find(‘.item_link’).text(lista.varlink);
row.find(‘.item_autore’).text(lista.varautore);
return(row);
}

L’esempio completo

Questo tutorial è dedicato al parsing di un feed rss tramite jQuery.
Al caricamento del documento andremo a a caricare via ajax il file news.xml
e poi prepareremo la visualizzazione.

Trattandosi di una chiamata ajax useremo la tradizionale icona animata per avvisare del caricamento dati in corso.
Nell html predisponiamo un div nascosto via css:

<div id="loader"><img src=”http://www.lorenzodeambrosis.net/blog/tutorial/images/ajax_loader.gif” alt="" /></div>

Al document assegniamo la gestione della visualizzazione e della scompars del div in oggetto (che poi andrà posizionato al centro della pagina)

$(document)
.ajaxStart(function(){$(‘#loader’).show();})
.ajaxStop(function() {$(‘#loader’).hide();})

al caricamento invece inoltriamo la chiamata con il metodo .ajax():

$.ajax({
type:’GET’,
url:’data/news.xml’,
dataType:’xml’,
success:function(str_xml){

}
})

Per quanto riguarda la parte di visualizzaizone dei dati invece utilizzeremo le funzionalità tradizionali di jQuery di attraversamento del DOM.
Quindi come prima cosa andremo a cercare il tag “item” all’interno della stringa str_xml ottenuta in risposta e per ogni item andremo a caccia delle info contenute

$(str_xml).find(‘item’).each(function(){
…
})

Come prima cosa assegniamo delle variabili ottenute dall’estrazione del contenuto dai tag con il metodo .text(),
quindi $(this) rappresenta l’item sul quale ci troviamo, al suo interno andiamo alla ricerca del tag desisderato (.find())
e infine preleviamo il testo del tag

var titolo=$(this).find(‘title’).text();
var miolink=$(this).find(‘link’).text();
var description=$(this).find(‘description’).text();
var pubDate=$(this).find(‘pubDate’).text();
var category=$(this).find(‘category’).text();

A questo punto possiamo costruire la stringa html da appendere al contenitore target della visualizzazione:

var riga1=”+titolo+”;
var riga2=’<strong>‘+</strong>category<strong>+’</strong> – <em>‘+&lt;/em>pubDate&lt;em>+’</em>‘;
var riga3=”+description+”;

$(‘<div class=”item”></div>’).html(riga1+riga2+riga3).appendTo(‘#contenitore’)

Ecco l’esempio completo