Il parsing di un feed JSON di Twitter con jQuery non è un'operazione banale quando non si conosce la struttura del feed in questione. Nel nostro esempio vedremo appunto come effettuare il parsing di tale feed JSON senza conoscere il nome delle proprietà dei suoi oggetti, ma semplicemente analizzando il contenuto di tali proprietà alla ricerca dei nostri tweet. L'esempio visualizzerà gli ultimi cinque tweet del mio status. Vediamo l'implementazione.
Twitter usa JSONP (JSON with Padding) per permettere ad AJAX di effettuare richieste cross-domain. jQuery utilizza il metodo $.getJSON() per effettuare il reperimento e il parsing di un file JSON, remoto o locale.
Per prima cosa abbiamo bisogno dell'URL completo del nostro feed JSON:
var JSONUrl = 'http://twitter.com/status/user_timeline/gabromanato.json?count=5&callback=?';
Le parti importanti dell'URL sono:
count: il numero di tweets da restituire (in questo caso 5)callback: specifica che si sta utilizzando JSONP
Dato che in tutti i miei tweet in genere c'è un URL in forma testuale, creiamo un'espressione regolare per individuare tali URL:
var URLRe = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
A questo punto dobbiamo usare $.getJSON() che restituisce un oggetto JSON. Ottenuto tale oggetto, dobbiamo eseguire dei cicli annidati su ciascun membro di quest'oggetto per verificare che:
- il membro sia un'oggetto
- il membro contenga una proprietà con valore stringa (i tweet sono sempre in questo formato)
- la stringa non sia il link al nostro profilo o l'ID numerico del tweet
- il tweet contenga un URL
$.getJSON(JSONUrl, function(json) {
$.each(json, function(item, value) {
if(typeof value === 'object') {
$.each(value, function(index, prop) {
if(typeof prop === 'string') {
if(!/^</.test(prop) && !/^\d+$/.test(prop)) { // link al profilo e ID
if(URLRe.test(prop)) {
var marked = prop.replace(URLRe, function($1) {
return '<a href="' + $1 + '">' + $1 + '</a>';
});
$('<div class="tweet"/>').html(marked).appendTo('#tweets');
}
}
}
});
}
});
});
Usando il metodo replace() sostituiamo infine i link testuali con dei link HTML. Infine creiamo un elemento HTML con il contenuto di ciascun tweet e lo inseriamo nel nostro elemento di destinazione.
Potete visionare l'esempio finale in questa pagina.