Cómo recuperar y analizar fuentes RSS en JavaScript

Supongamos que tiene una fuente RSS como ésta. El objetivo es solicitar esa fuente RSS, analizarla y hacer algo útil con los datos que contiene. RSS es XML, y podría decirse que no es tan fácil trabajar con XML que con JSON. Si bien muchas API ofrecen respuestas JSON, es menos típico de RSS, aunque existe.

Hagámoslo.

En primer lugar, probablemente sea inteligente validar el feed. De esa manera sabrá al menos que está trabajando con una respuesta válida (el análisis puede fallar en respuestas no válidas).

Luego necesitaremos realizar una solicitud de red a la URL en la que se encuentra el feed RSS. Utilizamos la API de recuperación nativa de JavaScript, ya que es la más aplicable. Definitivamente funciona en el navegador y parece que Node tiene una implementación muy popular.

Lo que haremos es:

1. Llama a la URL
2. Primero analice la respuesta como texto.
3. Luego analiza el texto conDOMParser()
4. Luego use los datos como lo haríamos si tuviéramos una referencia DOM normal.

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

Podemos hacer nuestro trabajo en esa función. RSS es algo así como HTML en el sentido de que se trata de elementos anidados. Nuestros datos serán algo como esto:

rss  channel    titleFeed Title/title    item       linkhttps://codepen.io/billgil/pen/ewqWzY/link       titleA sad rain cloud/title       dc:creatorBill Gilmore/dc:creator    /item    !-- a bunch more items --  /channel/rss

Entonces, podemos querySelectorAllbuscar esos itemelementos y recorrerlos para hacer lo que queramos. Aquí, crearé un montón de articleelementos como plantilla y luego los colocaré en una página web:

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"          h2            a href="${el.querySelector("link").innerHTML}" target="_blank" rel="noopener"              ${el.querySelector("title").innerHTML}            /a          /h2        /article      `;    });    document.body.insertAdjacentHTML("beforeend", html);  });

Aquí hay una demostración de cómo funciona:

Siempre pensé que jQuery era una buena biblioteca Ajax, además tiene algunas ayudas por todas partes. Así es como lo harías en jQuery.

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"            h2              a href="${el                .find("link")                .text()}" target="_blank" rel="noopener"                ${el.find("title").text()}              /a            /h2          /article        `;        document.body.insertAdjacentHTML("beforeend", template);      });  }});

Si vas a hacer esto de verdad en un sitio de producción, dirías que es un poco extraño dependiente de una API de terceros (y considera que RSS es una API) para representar cosas importantes en tu sitio. Probablemente haría la solicitud del lado del servidor en algún tipo de temporizador (CRON), la almacenaría en caché y luego haría que su interfaz usara los datos de ese caché. Más seguro y más rápido.