Aprendiendo jQuery: Capitulo 23 (Método getJSON)

En este último capitulo de jQuery vamos a ver el método getJSON con un caso muy práctico, el caso que me animó a realizar todos estos capítulos de jQuery y a mostrar el potencial que tiene el mismo.

Lo que vamos a realizar es una petición de un objeto JSON pero a twitter, para que nos devuelva los últimos n tweets de un usuario. Para ello solamente necesitaremos en la estructura html un div en el que incluiremos un ul que luego se irá rellenando con los tweets del usuario que nosotros queramos.

    Se me ha ocurrido que para dar más libertad al usuario vamos a usar el siguiente formulario también para que podáis escoger el usuario de twitter del que recuperar los tweets, el número de tweets y si se incluyen o no los RT.

    Solicitud Twitter

    Incluir RT

    En el submit de dicho formulario tenemos que asociar el código que veremos luego. Este código lo que hace es: parar el envío del formulario, recuperar los valores del número de tweets y si incluímos los RT, componer la url con el usuario y los datos get que necesita el api de twitter, realizamos la llamada con el método getJSON al que le pasamos la url y una función para el success. En esta función trabajaremos con los datos, puesto que recibe una variable con la respuesta. Dentro de esta función para cada objeto del data vamos a escribir su texto en nuestro ul a través de un li. Para que los enlaces salgan como tal, se incluye la función replaceURLWithHTMLLinks que se va a encargar de reescribir los mismos como enlaces html.

    function jqAjaxGetJSON() {
    	jQuery(document).on('ready', function () {
    		
    		jQuery('#main form').on('submit', function (e) {
    			e.preventDefault();
    			var url = 'https://api.twitter.com/1/statuses/user_timeline/' + jQuery('#tuser').val() + '.json';
    			var tweets, incluirrt; 
    			
    			tweets = jQuery('#tntweets').val();
    			incluirrt = document.frm.incluirRT.checked;
    			
    			if (incluirrt){
    				incluirrt = 1;
    			}else{
    				incluirrt = 0;
    			}
    			
    			url = url + '?count='+tweets+'&include_rts=' + incluirrt + '&callback=?';
    			
    			alert(url);
    			jQuery.getJSON(url, function(data) {
    				for(var i=1; i" + replaceURLWithHTMLLinks(data[i].text) + '');
    				}
    				
    				function replaceURLWithHTMLLinks(text) {
    					var exp = '/(b(https?|ftp|file)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig';
    					return text.replace(exp,"$1"); 
    				}
    			});
    		});
    	});
    }
    

    Por último dejamos el ejemplo que se puede probar en tiempo real:

    Solicitud Twitter

    Incluir RT

    Ejemplo Twitter: