jQuery: ricerca su twitter e parsing JSON

Uno dei formati più popolari per l’interscambio dei dati e JSON.
Vediamo come fare una ricerca su twitter e gestire la risposta.

Per prima cosa al document.ready andremo a mappare sugli input che hanno type=button l’evento click,
in questo modo la parte di form relativa all’input verrà gestita.
Il nostro utente inserirà la sua keyword, al click avvieremo la ricerca chiamando l’opportuna funzione:

<p><input id="cerca" type="search" /><br />
<input type="button" value="cerca" /></p>

$(document).ready(function(e) {$(‘input[type="button"]‘).click(function(){cerca();})})

La nostra funzione come prima cosa leggerà il valore inserito e poi costruirà la urla da chiamare:

var searchTerm=$(‘#cerca’).val();
 var baseUrl=’http://search.twitter.com/search.json?q=’;

Passo successivo la chiamata vera e propria e il parsing della risposta:

 $.getJSON(baseUrl+searchTerm+’&callback=?’,function(data){

})

La variabile data conterrà i dati di ritorno che scorreremo con un ciclo each, meglio scorreremo data.results che contiene le informazioni che vorremo visualizzare.
all’interno del ciclo creeremo l’html da appendere a un contenitore opportunamente predisposto nella pagina:

 $.each(data.results,function(){
 $(‘<div></div>‘)
 .append(‘<img src="<a href="http://www.lorenzodeambrosis.net/blog/2012/10/jquery-ricerca-su-twitter-e-parsing-json/'+this.profile_image_url+'" target="_blank">'+this.profile_image_url+'</a>" alt="" />‘)
 .append(‘<a href="http://www.lorenzodeambrosis.net/blog/2012/10/jquery-ricerca-su-twitter-e-parsing-json/#">‘+this.from_user+’</a>‘+this.text+’‘)
 .appendTo(‘#contenitore’)
 })

L’esempio completo