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 è:
- Una console JavaScript (come Firebug)
- Il metodo
$.getJSON()
di jQuery - Il nostro nome utente su YouTube
Implementazione
Creeremo un plugin jQuery che accetti quattro opzioni:
- Il numero di video da visualizzare
- Il nostro nome utente di YouTube
- La larghezza con cui verrà visualizzato l'iframe del video
- 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.