Digamos que tiene una fuente RSS como esta. 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 XML no es tan fácil de trabajar como JSON. Si bien muchas API ofrecen respuestas JSON, es menos típico de RSS, aunque existe.
Hagámoslo.
Primero, probablemente sea inteligente validar el feed. De esa manera, sabrá que al menos está trabajando con una respuesta válida (el análisis puede fallar en las respuestas no válidas).
Luego, necesitaremos realizar una solicitud de red a la URL en la que se encuentra la fuente RSS. Usemos 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:
- Llamar a la URL
- Primero analiza la respuesta como texto
- Luego analiza el texto con
DOMParser() - 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 son elementos anidados. Nuestros datos serán algo así:
<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>Para que podamos querySelectorAll para esos <item>elementos y hacer un bucle sobre ellos para hacer lo que nos plazca. Toma, haré un montón de <article> elementos como plantilla y luego colóquelos 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="https://css-tricks.com/how-to-fetch-and-parse-rss-feeds-in-javascript/${el.querySelector("link").innerHTML}/image/large.png" alt="">
<h2>
<a href="https://css-tricks.com/how-to-fetch-and-parse-rss-feeds-in-javascript/${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 ese funcionamiento:
Siempre pensé que jQuery era una buena biblioteca Ajax, además de que tiene algunos ayudantes 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="https://css-tricks.com/how-to-fetch-and-parse-rss-feeds-in-javascript/${el.find("link").text()}/image/large.png" alt="">
<h2>
<a href="https://css-tricks.com/how-to-fetch-and-parse-rss-feeds-in-javascript/${el
.find("link")
.text()}" target="_blank" rel="noopener">
${el.find("title").text()}
</a>
</h2>
</article>
`;
document.body.insertAdjacentHTML("beforeend", template);
});
}
});
Si va a hacer esto de verdad en un sitio de producción, yo diría que es un poco extraño depender de una API de terceros (y considero RSS una API) para representar cosas importantes en su sitio. Probablemente haría la solicitud del lado del servidor en algún tipo de temporizador (CRON), la almacenaría en caché y luego tendría los datos de uso de su interfaz de esa caché. Más seguro y rápido.