jQuery: usare JSON e le API dei web services

jQuery: usare JSON e le API dei web services

Questo articolo è un tutorial sull'interazione tra jQuery e le API di un servizio web. Nello specifico, utilizzeremo le API JSON di YouTube per reperire i nostri video completi di titolo e descrizione. Vediamo insieme i dettagli.

Requisiti

Quello che ci serve per realizzare il nostro compito è:

  1. Una console JavaScript (come Firebug)
  2. Il metodo $.getJSON() di jQuery
  3. Il nostro nome utente su YouTube

Implementazione

Creeremo un plugin jQuery che accetti quattro opzioni:

  1. Il numero di video da visualizzare
  2. Il nostro nome utente di YouTube
  3. La larghezza con cui verrà visualizzato l'iframe del video
  4. L'altezza con cui verrà visualizzato l'iframe del video.

Partiamo dalla definizione del plugin e dalle opzioni:


(function($) {

    $.fn.getYouTubeVideos = function(options) {
    
        var that = this;
        
        var settings = {
            items: 5,
            username: 'gabrieleromanato',
            width: 400,
            height: 300
        };
        
        options = $.extend(settings, options);
        
        //... continua
    };
})(jQuery);

Il plugin verrà usato come $(elemento).getYouTubeVideos(opzioni). Ora dobbiamo assemblare l'URL delle API di YouTube da passare al metodo $.getJSON(). Useremo le opzioni items e username:


var url = 'http://gdata.youtube.com/feeds/api/videos?q=' + options.username + '&max-results=' + options.items + '&v=2&alt=jsonc';

Quando useremo il metodo $.getJSON() ci verrà restituito un oggetto JSON con la seguente struttura:


{

    data: {
    
    	items: [
    	
    		// Array di oggetti, uno per ogni video richiesto
    	
    	]
    
    }

}

L'oggetto JSON contiene una struttura annidata in cui i dati di ciascun video sono contenuti nell'array di oggetti items. Ecco come effettuare il parsing di tale oggetto:


return that.each(function() {

            var element = $(that);
            var html = '';

            $.getJSON(url, function(videos) {

                var items = videos.data.items;
                for (var i in items) {

                    var item = items[i]; // singolo oggetto dell'array
                    var title = item.title;
                    var description = item.description;
                    var url = item.content['5']; // URL al file del video

                    html += '
'; html += '

' + title + '

'; html += ''; html += '

' + description + '

'; html += '
'; } element.html(html); }); });

Utilizzare la console JavaScript

Per conoscere la struttura dell'oggetto restituito ho semplicemente inviato tale oggetto alla console:


	console.log(videos);
	

Sia Firebug che le altre console JavaScript dei browser mostrano l'intera struttura dell'oggetto JSON.

Potete visionare l'esempio finale in questa pagina.

Torna su