RSS-Feed Widget

mieze · 27. Juli 2018

Liebe Forummitglieder,

ich habe ein Widget erstellt, welches einen externen RSS-Feed (URL) ausliest und darstellt.

Mittels XML habe ich das gut hinbekommen. Habe hier aber immer die URL des Feeds als XML-Datei gespeichert und auf den Webspace geladen. Was natürlich mühsam wird, wenn sich der Feed ständig ändert.

Code

$(document).ready(function(){
$.ajax({
    type: "GET",
    url: "feed.xml",
    dataType: "xml",
    success: function(xml){
 
    var gItem = '';

    var countItems = $(xml).find("item").size();
    var maxItems = 18;
  


    $(xml).find('item').each(function(i){

    if (i < maxItems) {
    

    var itemTitle = $(this).find('title').text();
    var itemDescription = $(this).find('description').text();
    var itemAuthor = $(this).find('author').text();
    var itemCategory = $(this).find('category').text();
    var itemImage = $(this).find('enclosure').attr('url');
    var itemLink = $(this).find('link').text();

  
     gItem += '<div class="item">';
    gItem += '<a href="'+itemLink+'" class="itemLink" target="_blank">';
    gItem += '<div class="itemImage" style="background-image:url('+itemImage+');"></div>';
    gItem += '<div class="itemBalken">';
    gItem += '<div class="itemTxt">';
    gItem += '<div class="itemTitle"><p>'+cropTitle(itemTitle)+' &gt;</p></div>'; 
    gItem += '</div>';
    gItem += '</div>';
    gItem += '</a>';
    gItem += '</div>';    
    }

    });

Alles anzeigen

Nun habe ich es auf anderem Weg geschafft, die URL (ohne XML-Datei zu erstellen) auszulesen. Und zwar mit der API rss2json. Das sieht so aus...

Code

$(document).ready(function(){
  $.ajax({
    type: "GET",
    //URL RSS-FEED
    url: "https://api.rss2json.com/v1/api.json?rss_url=" + url,
  dataType: 'json',
  success: function(data) {

In der Konsole sehe ich, dass dann ein JSON-Array mit den jeweiligen items ausgegeben wird. Nun schaffe ich es aber nicht dass so hinzubekommen wie im Falle von einer XML-Datei.

Wie bekomme ich die einzelnen Items da raus? Ich hätte jetzt alles so wie beim XML, aber das funktioniert nicht. Was mache ich falsch? Wäre super wenn ihr mir da weiter helfen könntet. Dankeschön!

Code

$(document).ready(function(){

  $.ajax({
    type: "GET",
    //URL RSS-FEED
    url: "https://api.rss2json.com/v1/api.json?rss_url=" + url,
  dataType: 'json',
  success: function(json) {

    var gItem = '';

    var countItems = $(json).find("item").size();
    var maxItems = 18;

Alles anzeigen

Sempervivum · 27. Juli 2018

Wenn Du als dataType json angibst, dekodiert jQuery das JSON und übergibt ein Objekt an den success-Callback, aus dem Du die Bestandteile ganz leicht auslesen kannst:

Code

            success: function (data) {
                console.log(data);
                data.items.forEach(item => {
                    console.log(item.title, item.link, item.content, item.description);
                });
            }

mieze · 27. Juli 2018

ah, ok super, da war ich ja nahe dran und irgendwie doch nicht...

damit ich das jetzt hübsch verpacke würde ich es gerne in einem div container ausspielen.

der code stimmt dazu nicht oder? denn die zeile ab

Code

   var itemTitle = $(this).find('title').text();

ist noch von der version mit XML. dürfte mit json dann nicht funktionieren. wie kann ich das bei json adaptieren?

Code

$.ajax({
    type: "GET",
    //URL RSS-FEED
    url: "https://api.rss2json.com/v1/api.json?rss_url=" + url,
  dataType: 'json',
  success: function(data) {
      console.log(data);
            data.items.forEach(item => {
                console.log(item.title, item.link, item.enclosure.link);

                var gItem = '';
                var maxItems = 18;

                      $(data).find('item').each(function(i){

                      if (i < maxItems) {
                      

                      var itemTitle = $(this).find('title').text();
                      var itemImage = $(this).find('enclosure').attr('url');
                      var itemLink = $(this).find('link').text();

                      
                      gItem += '<div class="item">';
                      gItem += '<a href="'+item.link+'" class="itemLink" target="_blank">';
                      gItem += '<div class="itemImage" style="background-image:url('+item.link+');"></div>';
                      gItem += '<div class="itemBalken">';
                      gItem += '<div class="itemTxt">';
                      gItem += '<div class="itemTitle"><p>'+cropTitle(item.title)+' &gt;</p></div>'; 
                      gItem += '</div>';
                      gItem += '</div>';
                      gItem += '</a>';
                      gItem += '</div>';

                      };
            });
        });
  }
});
});

Alles anzeigen

Sempervivum · 27. Juli 2018

Dies:

Code

var itemTitle = $(this).find('title').text();

ist bei einem Objekt viel einfacher:

Code

var itemTitle = item.title;

Vorausgesetzt, Du benutzt die forEach-Schleife wie in meinem vorigen Posting.

Auf die Weise kannst Du auf alle Bestandteile des Feed zugreifen und dein HTML generieren.

mieze · 27. Juli 2018

ok super danke.

habe das jetzt so versucht aber irgendwie wird nichts generiert ...

ich finde den fehler nicht...

Code

$(document).ready(function(){


  $.ajax({
    type: "GET",
    //URL RSS-FEED
    url: "https://api.rss2json.com/v1/api.json?rss_url=" + url,
  dataType: 'json',
  success: function(data) {
      console.log(data);
            data.items.forEach(item => {
                console.log(item.title, item.link, item.enclosure.link);

                var gItem = '';
                                
                      var itemTitle = item.title.text;
                      var itemLink = item.link;
                      var itemImage = item.enclosure.link;
                      
                      gItem += '<div class="item">';
                      gItem += '<a href="'+itemLink+'" class="itemLink" target="_blank">';
                      gItem += '<div class="itemImage" style="background-image:url('+item.enclosure.link+');"></div>';
                      gItem += '<div class="itemBalken">';
                      gItem += '<div class="itemTxt">';
                      gItem += '<div class="itemTitle"><p>'+cropTitle(itemTitle)+' &gt;</p></div>'; 
                      gItem += '</div>';
                      gItem += '</div>';
                      gItem += '</a>';
                      gItem += '</div>';
            
        });


$('#gItem-slider').append(gItem);
        var owl = $('#gItem-slider');
        owl.owlCarousel({
            margin: 0,
            nav: true,
            navText: ["<i class='material-icons'>keyboard_arrow_left</i>","<i class='material-icons'>keyboard_arrow_right</i>"],
            loop: true,
            autoplay:true,
            autoplayTimeout:3000,
            autoplayHoverPause:true,
            smartSpeed:500,
            responsive: {
                0: {
                items: 1
                },
                600: {
                items: 1
                },
                1000: {
                items: 1
                }
            }
        });
 //        $('.owl-prev').attr("onclick", "javascript:var img=new Image();img.src='';return true;");
        $('.owl-prev').attr("onclick", "javascript:var img=new Image();img.src='';return true;");
        $('.owl-next').attr("onclick", "javascript:var img=new Image();img.src='';return true;");
 
  },
  error: function() {
    $("<div class='errorXml'></div>").html('Fehler beim Laden des XML Files.').prependTo(".results");
  }
  });
});  


</script>

Alles anzeigen

mieze · 27. Juli 2018

ah, ich glaub ich hatte die klammern falsch gesetzt

Sempervivum · 27. Juli 2018

Zwei Probleme sehe ich auf Anhieb:

Die Variable gItem ist lokal innerhalb der forEach-Schleife definiert. Daher ist sie außerhalb der Schleife nicht sichtbar und ein Zugriff würde einen "undefined"-Fehler liefern.
Selbst wenn Du die Variable gItem global definieren würdest, würde es nicht funktionieren, weil Ajax asynchron arbeitet: Die Anfrage wird an den Server gesendet, etwas später trifft die Antwort mit den Daten ein. Greifst Du jetzt auf das Ergebnis direkt im Anschluss an den Ajax-Aufruf zu, so ist die Antwort vom Server noch nicht da und die Inhalte in der Variablen nicht vorbesetzt.

Lösung: Alles was die Variable gItem mit Inhalt benötigt, ebenfalls im success-Callback erledigen. Wenn dir der Code dann zu unübersichtlich wird, kannst Du die Aktionen in eine Funktion schreiben und diese als Callback-Funktion übergeben.

mieze · 27. Juli 2018

hm... doch nicht. wo ist da der hund drin? ich versteh das nicht. laut konsole fehlt eine klammer aber ich wüsste nicht so

Code

$(document).ready(function(){


  $.ajax({
    type: "GET",
    //URL RSS-FEED
    url: "https://api.rss2json.com/v1/api.json?rss_url=" + url,
  dataType: 'json',
  success: function(data) {
      console.log(data);
            data.items.forEach(item => {
                console.log(item.title, item.link, item.enclosure.link);

                var gItem = '';
                                
                      var itemTitle = item.title.text;
                      var itemLink = item.link;
                      var itemImage = item.enclosure.link;
                      
                      gItem += '<div class="item">';
                      gItem += '<a href="'+itemLink+'" class="itemLink" target="_blank">';
                      gItem += '<div class="itemImage" style="background-image:url('+item.enclosure.link+');"></div>';
                      gItem += '<div class="itemBalken">';
                      gItem += '<div class="itemTxt">';
                      gItem += '<div class="itemTitle"><p>'+itemTitle+' &gt;</p></div>'; 
                      gItem += '</div>';
                      gItem += '</div>';
                      gItem += '</a>';
                      gItem += '</div>';
            
      
});  

$('#gItem-slider').append(gItem);
        var owl = $('#gItem-slider');
        owl.owlCarousel({
            margin: 0,
            nav: true,
            navText: ["<i class='material-icons'>keyboard_arrow_left</i>","<i class='material-icons'>keyboard_arrow_right</i>"],
            loop: true,
            autoplay:true,
            autoplayTimeout:3000,
            autoplayHoverPause:true,
            smartSpeed:500,
            responsive: {
                0: {
                items: 1
                },
                600: {
                items: 1
                },
                1000: {
                items: 1
                }
            }
        });
 //        $('.owl-prev').attr("onclick", "javascript:var img=new Image();img.src='';return true;");
        $('.owl-prev').attr("onclick", "javascript:var img=new Image();img.src='';return true;");
        $('.owl-next').attr("onclick", "javascript:var img=new Image();img.src='';return true;");
 
  };
  error: function() {
    $("<div class='errorXml'></div>").html('Fehler beim Laden des XML Files.').prependTo(".results");
  }
  });
 });

Alles anzeigen

Sempervivum · 27. Juli 2018

html-seminar.de/woltlab/attachment/1636/

Ein guter Editor und sinnvolles Einrücken bringen es an den Tag:

Da wo das beanstandete Semikolon steht muss ein Komma hin.

Weil dein Code nicht eingerückt war, habe ich mich offenbar getäuscht: Die weitere Bearbeitung steht offenbar doch im success-Callback.

Jetzt musst Du die Definiton von gItem vor das forEach schieben:

Code

                console.log(data);
                var gItem = '';
                data.items.forEach(item => {
                    console.log(item.title, item.link, item.enclosure.link);
                                
                      var itemTitle = item.title.text;
                      var itemLink = item.link;
                      var itemImage = item.enclosure.link;

mieze · 28. Juli 2018

vielen Dank für den hinweis. Ich verwende eigentlich eh Sublime als Editor. Der ist super! Aber anscheinend wollte er auch das Semikolon nicht. Ich musste einen Beistrich machen damit das funktioniert, weil es wohl AJAX ist... daran habe ich nicht gedacht.

Jedenfalls danke für deine Hilfe es hat nun geklappt

mieze · 30. Juli 2018

Hallo,

ich bin es nochmal.

Aus irgendeinem Grund geht das anscheinend im Internet Explorer nicht. Kann mir jemand sagen, woran das liegen kann? Ich hab leider selbst keinen IE zum testen.

Dankeschön!

Sempervivum · 30. Juli 2018

Offenbar unterstützt der IE 11 die kurze Notation für das forEach nicht:

Code

data.items.forEach(item => {

Verwendet man die althergebrachte funktioniert es:

Code

data.items.forEach(function(item) {

mieze · 18. September 2018

Hallo ich bin es wieder

Ich habe vor einiger Zeit ein RSS Widget erstellt mit der API api.rss2json.com.

Das haut nun komischerweise aber nicht mehr so hin wie ich das möchte...

Fehlermeldung "

Code

{"status":"error","message":"Daily rate limit exceeded, please try again after 16 hours, or use an api key (https://rss2json.com/register)."}

"

bzw "2429 No Reason Phrase"..

voran kann das liegen bzw. gibt es eine Alternative wie ich das ohne der API lösen könnte?

Danke schonmal und lG,

mieze

Sempervivum · 18. September 2018

Die Fehlermeldung sagt doch eigentlich schon alles aus: Offenbar gibt es eine Begrenzung für die Zahl der Zugriffe und diese wurde überschritten. Dir wird empfohlen, einen API-Key unter der angegebenen URL zu erwerben. Dieser kann kostenpflichtig sein oder nicht. Es ist immer ein Risiko, solche Dienstleistungen zu benutzen, weil man nie weiß, ob sie irgendwann eingestellt werden.

mieze · 20. September 2018

hm, ok habe ich befürchtet.

habe es leider ohne dem rss2json nicht hinbekommen Das muss doch anders auch gehen oder?

Mein Hauptproblem ist dass ich XML aus deiner URL auslesen muss und ich bekomme das mit Hilfe von Google bzw Tutorials nicht hin, da dort immer von schon vorhandenen xml-Files ausgegangen wird. Ich weiß nicht wie ich das mit einer URL mache...

Sempervivum · 20. September 2018

Du kannst den Inhalt der URL mit PHP lesen und dann das XML auswerten. Vor kurzem hat jemand ein Skript mit wenigen Zeilen gepostet, das das tut. Ich werde versuchen es wiederzufinden ...

Sempervivum · 20. September 2018

Den Thread, den ich erinnere, habe ich nicht gefunden, aber Google findet einiges zu dem Thema, z. B. dieses:
https://stackoverflow.com/ques…implexml-to-read-rss-feed

mieze · 20. September 2018

danke. Nur weisst du was ich nicht ganz verstehe. Die Beispiele im Web mit URL sind immer eben so, dass die URL am Schluss nach dem Slash ein .xml dran haben.
Ich habe aber von dem gewünschen RSS Feed nur eine URL ohne .xml... die URL hört nach dem Slash auf. Ich kann also so nicht direkt auf eine XML-Datei zugreifen. Weißt du was ich meine?

Sempervivum · 20. September 2018

Keine Sorge, das funktioniert trotzdem, ich habe den Code von Stackoverflow gerade mit dieser URL getestet:

http://rss.dw.de/xml/rss-de-cul

und er funktioniert einwandfrei.

Man kann die URL manipulieren, so dass sie z. B. ohne Erweiterung angezeigt wird. Ich habe mich damit noch nicht befasst, aber andere können es dir sicher genauer erklären.

mieze · 23. September 2018

thx, aber wenn ich das mit PHP mache kann ich den code darunter (für die Slideshow) noch verwenden? kann ich das mischen?

kann ich davor einfach <?php .... ?> einfügen mit dem Code aus dem Thread von oben...

Code

$('#gItem-slider').append(gItem);
        var owl = $('#gItem-slider');
        owl.owlCarousel({
            margin: 0,
            nav: true,
            navText: ["<i class='material-icons'>keyboard_arrow_left</i>","<i class='material-icons'>keyboard_arrow_right</i>"],
            loop: true,
            autoplay:true,
            autoplayTimeout:3000,
            autoplayHoverPause:true,
            smartSpeed:500,
            responsive: {
                0: {
                items: 1
                },
                600: {
                items: 1
                },
                1000: {
                items: 1
                }
            }
        });
 //        $('.owl-prev').attr("onclick", "javascript:var img=new Image();img.src='';return true;");
        $('.owl-prev').attr("onclick", "javascript:var img=new Image();img.src='';return true;");
        $('.owl-next').attr("onclick", "javascript:var img=new Image();img.src='';return true;");
 
  },
  error: function() {
    $("<div class='errorXml'></div>").html('Fehler beim Laden des XML Files.').prependTo(".results");
  }
  });
});  
</script>

Alles anzeigen

RSS-Feed Widget

Jetzt mitmachen!

Teilen