Podcasts, RSS Feeds, and JavaScript
If you’re familiar with the world of podcasting, or have been around the internet, chances are you’ve heard of RSS feeds, or have at least seen this little orange icon…
An RSS feed (short for Really Simple Syndication, or RDF Site Summary) is basically a running feed of updates on a website (or podcast!), in XML format, that can be accessed from a specific URL. Most of the time, a user would have a news aggregator app that they’d add all of these urls to, and then they’d be able to check their app and see the new updates on whatever they’re tracking.
No need to limit ourselves to news aggregator apps, though — we can pull the information from an RSS feed ourselves, using JavaScript’s Fetch API!
For the sake of example, I’ll be using the RSS feed for Theo Von’s This Past Weekend Podcast — the RSS feel url is here. If you go to that webpage, you’ll see something similar to this, but of course you’ll probably see some different data at the time of reading, as new podcasts will have been released.
Want to read this story later? Save it in Journal.
This is in XML format, which is somewhat readable, but littered with element tags, which will come in handy soon! At the bottom of the screenshot above, you can see the first <item> element of the feed, holding the title and description for the latest episode, and underneath that (out of the screenshot) there’s the rest of the information about the episode, as well as links for you to watch or listen to it, and of course all of the other item elements holding the data for the other episodes.
When we run a fetch on this url, we’ll get this whole page back as a string, which we can’t work with just yet. Lucky for us, JavaScript has a DOMParser interface (documentation here) which can be used to parse this string into a nice, neat XML DOM, which we can then run querySelectors on to retrieve the information we’re interested in.
Since we can see the information for the podcast is in <item> tags, once we get this XML DOM object back, we can run querySelectorAll for ‘item’ to get back a NodeList of all of the podcasts on the feed, as that’s all we really need right now. In this case, we get back all of the episodes of the podcast, but note that this is not always the case! Some podcasts will only keep up to a certain number of the most recent episodes on their feed — it all depends how the creator sets their feed up.
Let’s see what that looks like in JavaScript… I refrained from using helper methods to make it a bit easier to see what’s going on step by step.
And here’s what my webpage and console look like after this script runs -
On the right side, you can see what a single item element looks like (this came from the console.log on line 22) — it has all of the information we’d need about the podcast! Better yet, we can still access each of these bits of information by running a querySelector on each item element for whatever we’re looking for (as demonstrated on line 32)! For simplicity, I only selected the titles of each element, and then listed them on the webpage — but with a few more lines of code, we could easily pull out links to each episode, or pull and display the details for each, and repeat these steps to build an entire podcast website!
Happy fetching!
📝 Save this story in Journal.
