Wie Sie RSS-Feeds in JavaScript abrufen und parsen

Nehmen wir an, Sie haben einen RSS-Feed wie diesen. Das Ziel ist es, diesen RSS-Feed anzufordern, ihn zu parsen und etwas Nützliches mit den darin enthaltenen Daten zu tun. RSS ist XML und mit XML ist es wohl nicht so einfach zu arbeiten wie mit JSON. Während viele APIs JSON-Antworten anbieten, ist dies bei RSS weniger üblich, obwohl es existiert.

Lassen Sie es uns erledigen.

Zuerst ist es wahrscheinlich ratsam, den Feed zu validieren. So wissen Sie zumindest, dass Sie es mit einer gültigen Antwort zu tun haben (das Parsen kann bei ungültigen Antworten fehlschlagen).

Dann müssen wir eine Netzwerkanforderung an die URL stellen, an der sich der RSS-Feed befindet. Wir verwenden die native fetch-API von JavaScript, da diese am weitesten verbreitet ist. Sie funktioniert definitiv im Browser und es scheint, dass Node eine sehr beliebte Implementierung hat.

Was wir tun werden ist

1. Die URL aufrufen
2. Die Antwort zuerst als Text parsen
3. Dann den Text mit DOMParser() parsen
4. Dann die Daten so verwenden, als hätten wir eine normale DOM-Referenz

const RSS_URL = `https://codepen.io/picks/feed/`;

fetch(RSS_URL)
  .then(response => response.text())
  .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
  .then(data => console.log(data))

Wir können unsere Arbeit in dieser Funktion erledigen. RSS ist irgendwie wie HTML, da es verschachtelte Elemente gibt. Unsere Daten werden in etwa so aussehen

<rss>
  <channel>
    <title>Feed Title</title>
    <item>
       <link>https://codepen.io/billgil/pen/ewqWzY</link>
       <title>A sad rain cloud</title>
       <dc:creator>Bill Gilmore</dc:creator>
    </item>
    <!-- a bunch more items -->
  </channel>
</rss>

Wir können also <item>-Elemente mit querySelectorAll auswählen und sie durchlaufen, um zu tun, was wir wollen. Hier erstelle ich eine Reihe von <article>-Elementen als Vorlage und füge sie dann auf einer Webseite ein

fetch(RSS_URL)
  .then(response => response.text())
  .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
  .then(data => {
    console.log(data);
    const items = data.querySelectorAll("item");
    let html = ``;
    items.forEach(el => {
      html += `
        <article>
          <img src="${el.querySelector("link").innerHTML}/image/large.png" alt="">
          <h2>
            <a href="${el.querySelector("link").innerHTML}" target="_blank" rel="noopener">
              ${el.querySelector("title").innerHTML}
            </a>
          </h2>
        </article>
      `;
    });
    document.body.insertAdjacentHTML("beforeend", html);
  });

Hier ist eine Demo, die das zeigt

Ich habe schon immer gedacht, dass jQuery eine schöne Ajax-Bibliothek ist und es auch einige Helfer rundherum gibt. So würden Sie es mit jQuery machen.

const RSS_URL = `https://codepen.io/picks/feed/`;

$.ajax(RSS_URL, {
  accepts: {
    xml: "application/rss+xml"
  },

  dataType: "xml",

  success: function(data) {
    $(data)
      .find("item")
      .each(function() {
        const el = $(this);

        const template = `
          <article>
            <img src="${el.find("link").text()}/image/large.png" alt="">
            <h2>
              <a href="${el
                .find("link")
                .text()}" target="_blank" rel="noopener">
                ${el.find("title").text()}
              </a>
            </h2>
          </article>
        `;

        document.body.insertAdjacentHTML("beforeend", template);
      });
  }
});

Wenn Sie dies auf einer Produktionsseite ernsthaft nutzen wollen, halte ich es für etwas seltsam, sich auf eine Drittanbieter-API (und ich betrachte RSS als API) zu verlassen, um wichtige Inhalte auf Ihrer Website darzustellen. Ich würde die Anfrage wahrscheinlich serverseitig zu einer bestimmten Zeit (CRON) durchführen, sie cachen und dann Ihre Frontend die Daten aus diesem Cache verwenden lassen. Sicherer und schneller.