jQueryTwitter

JSON : Creare un widget con gli ultimi tweet da inserire nel blog con jQuery

Come promesso, dopo la presentazione di JSON come formato per scambio dati tra applicazioni, eccoci ad un esempietto tanto semplice quanto utile che ci dimostra le potenzialità di questa tecnologia soprattutto in combinazione con jQuery.

Avete il vostro account Twitter e, supponiamo vogliate mostrare gli ultimi tweet di un account Twitter, magari inserendo il tutto in un bel widget da piazzare sul vostro blog.

Vediamo come fare.

 

Mostrare gli ultimi tweet con JSON e jQuery

Decisamente più leggero dell’XML, JSON si propone di fornire una presentazione dei dati (array e oggetti) nel formato chiave : valore in modo da semplificare la gestione dei dati stessi soprattutto nello scambio di informazioni fra le varie applicazioni.

jQuery, così come visto per Ajax, fornisce un metodo molto pratico per interagire con JSON :

getJSON()

La sintassi base di questo metodo accetta una URL, che punta un servizio che restituisce i dati in formato JSON, e una funzione di callback che, invece, pensa solitamente alla gestione dei dati ottenuti. Informazioni più dettagliate ed esempi specifici sul metodo suddetto le trovate qui.

Prima di presentare l’esempio specifico, volevo sottolineare il ruolo fondamentale in queste integrazioni rivestito dalle API, ovvero quelle interfacce e procedure messe a disposizione dei programmatori da servizi e applicazioni per consentire di interagire con i loro strumenti e informazioni.

Nel caso di Twitter, eccovi la pagina ufficiale delle API.

Passiamo al codice del nostro esempio :

 

$.getJSON(“http://twitter.com/statuses/user_timeline/ACCOUNT_USER.json?callback=?”,   function(data) {
     $(“#twitter”).html(“”);
     for (i=0; i< =5; i++) {
         $(“#twitter”).append(“<li>”+data[i].text+”</li>”);
     }
});

 

Ho, volutamente, tralasciato la parte Html a corredo concentrandomi solo su jQuery. Il codice é decisamente banale e, notate, come serva solo richiamare il metodo getJSON con la URL delle API di Twitter che restituirà dei dati in formato JSON. Se avete un account Twitter provate a visualizzare cosa vi restituisce la chiamata diretta :

http://twitter.com/statuses/user_timeline/ACCOUNT_USER.json

sostituendo ad ACCOUNT_USER il vostro account. Visualizzerete una marea di informazioni testuali difficilmente comprensibili, ma facilmente gestibili e manipolabili proprio grazie a JSON e ai suoi formati.

La seconda parte, quella gestita dalla funzione di callback, serve solo a visualizzare in un div di nome “twitter” l’html risultante che, noterete, riguarda solo gli ultimi 5 tweets (valore modificabile, ovviamente) dell’account specifico.

La parte che comprende il ciclo for, poteva esser scritta in modo più elegante in jQuery :

$.each(data, function(i,item) {

$(“twitter”).append(“<li>”+item.text+”</li>”);

}

 

La funzione $.each() non è la stessa cosa della semplice .each() che viene utilizzata per scorrere, in esclusiva, solo su un oggetto jQuery. $.each() può essere utilizzata per scorrere tutte le collezioni anche se si tratta di una mappa (oggetto JavaScript) o un array.

Nel nostro caso in cui abbiamo una matrice, alla funzione callback viene passato un indice di array e, per ogni elemento, un valore corrispondente della matrice. Il metodo restituisce, come primo argomento, l’oggetto che è stato reiterato.

Eccovi un esempio che rende bene l’idea :

 

$.each([55, 67], function(index, value) {
  alert(index + ‘: ‘ + value);
});

Stamperà, come output :

 

0 : 55

1 : 67

 

Infine , a questo link trovate molte altre possibilità di sfruttamento delle API Twitter con JSON e non solo.

Articoli simili

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top button