jQuery: parsing xml

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