[[webdev:stuff:mit-yql-und-jquery-feeds-anzeigen]]

Mit YQL und jQuery Feeds in einem Container anzeigen

Die Beispiele benötigen jQuery!

Siehe auch:

Das Objekt bezieht über das Array „url“ eine Menge von Rss2.0 Feeds über die yql-api. Wichtig ist, das der Ajax-Aufruf den Parameter „dataType“ als „jsonp“ (Wiki: JSON with padding,http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/) mitliefert. Ansonsten schlägt die Same-Origin-Police zu und der Request wird unterbunden. Allerdings ist mir aufgefallen, dass Firefox den Request mittels getJSON() ohne dies ausführt. Auf der sicheren Seite, lauffähig unter IE und Opera und die Webkit-Browser.

yqlfeeds.js
$.yqlGetFeeds = function(urls,callback){
                var query = [];
                var postTo = "http://query.yahooapis.com/v1/public/yql?q=";
                if($.isArray(urls)){
                        $(urls).each(function(i,k){
                                if(k.match("http")){
                                        query.push("'"+escape(k)+"'");
                                }
                        })
                        sort =  "| sort(field='pubDate',descending='true')";
                        to = "SELECT+title,pubDate,link,description+FROM+rss+WHERE+url+IN+(" + query.join(",") + ")" +sort+"&format=json";
                        $.ajax({
                                url: postTo + to,
                                dataType: 'jsonp',
                                success: callback
 
                        });
                }
        }

Das Beispiel lädt über die yql-api die 3 feed-url und gibt uns das Ergebnis im JSON-Format zurück, das callback iteriert über das Objekt und hängt die Ausgabe an den Container mit der ID „content“ an.

var url = [
            "http://datenfahrt.de/haikohall/podcast.php",
            "http://identi.ca/api/statuses/user_timeline/173182.rss",
            "http://datenfahrt.de/wiki/feed.php"
            ];
 
 
$.yqlGetFeeds(url,function(items){
                path = items.query.results.item;
                $(path).each(function(){
                   container = $("<p/>").addClass("item").appendTo("#content");
                   $("<h2/>").html(this.title).appendTo($(container));
                   $("<p/>").html(this.pubDate).appendTo($(container));
                   $("<p/>").html(this.description).appendTo($(container));
                 })
            });
<div id="content"></div>

Ein Beispiel findet man auf der Startseite von datenfahrt.de, womit ein Livestream verschiedener sozialer Netzwerke dargestellt werden.

Startseite mit einem Feed von Datenfahrt.de

Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
  • webdev/stuff/mit-yql-und-jquery-feeds-anzeigen.txt
  • Zuletzt geändert: 2012/07/10 07:37
  • (Externe Bearbeitung)