RSS-Feed Widget

  • 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.


    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!


  • 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);
                    });
                }
  • 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?


  • 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.

  • ok super danke.

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


    ich finde den fehler nicht...

  • Zwei Probleme sehe ich auf Anhieb:

    1. 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.
    2. 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.

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

  • 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;
  • 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 :)

  • 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!

  • 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) {
  • 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

  • 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.

  • 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...

  • 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?

  • 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...


Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!