How to parse an RSS feed using JavaScript

Question

I need to parse an RSS feed  XML version 2 0  and display the parsed details in an HTML page

User · Answer

For anyone else reading this  in 2019 onwards  unfortunately most JS RSS reading implementations don t now work  Firstly Google API has shut down so this is no longer an option and because of the CORS security policy you generally cannot now request RSS feeds cross-domains    Using the example on https   www raymondcamden com 2015 12 08 parsing-rss-feeds-in-javascript-options  2015  I get the following   Access to XMLHttpRequest at  https   feeds feedburner com raymondcamdensblog format xml  from origin  MYSITE  has been blocked by CORS policy  No  Access-Control-Allow-Origin  header is present on the requested resource   This is correct and is a security precaution by the end website but does now mean that the answers above are unlikely to work   My workaround will probably be to parse the RSS feed through PHP and allow the javascript to access my PHP rather than trying to access the end-destination feed itself

User · Answer

Trying to find a good solution for this now  I happened upon the FeedEk jQuery RSS ATOM Feed Plugin that does a great job of parsing and displaying RSS and Atom feeds via the jQuery Feed API  For a basic XML-based RSS feed  I ve found it works like a charm and needs no server-side scripts or other CORS workarounds for it to run even locally

User · Answer

If you want to use a plain javascript API  there is a good example at https   github com hongkiat js-rss-reader    The complete description at https   www hongkiat com blog rss-reader-in-javascript   It uses fetch method as a global method that asynchronously fetches a resource  Below is a snap of code   fetch websiteUrl  then  res    gt      res text   then  htmlTxt    gt        var domParser   new DOMParser       let doc   domParser parseFromString htmlTxt   text html       var feedUrl   doc querySelector  link type  application rss xml     href         catch      gt  console error  Error in fetching the website

User · Answer

You can use jquery-rss or Vanilla RSS  which comes with nice templating and is super easy to use      Example for jquery rss     your-div   rss  https   stackoverflow com feeds question 10943544         limit  3      layoutTemplate    lt ul class  inline  gt  entries  lt  ul gt        entryTemplate    lt li gt  lt a href   url   gt   author   date    title  lt  a gt  lt br  gt  shortBodyPlain  lt  li gt          Example for Vanilla RSS const RSS   require  vanilla-rss    const rss   new RSS      document querySelector   your-div         https   stackoverflow com feeds question 10943544                   options go here          rss render   then      gt      console log  Everything is loaded and rendered          See http   jsfiddle net sdepold ozq2dn9e 1  for a working example

User · Answer

If you are looking for a simple and free alternative to Google Feed API for your rss widget then rss2json com could be a suitable solution for that   You may try to see how it works on a sample code from the api documentation below   x000D   x000D  google load  feeds    1    x000D   x000D      function initialize     x000D        var feed   new google feeds Feed  https   news ycombinator com rss    x000D        feed load function result    x000D          if   result error    x000D            var container   document getElementById  feed    x000D            for  var i   0  i  lt  result feed entries length  i      x000D              var entry   result feed entries i   x000D              var div   document createElement  div    x000D              div appendChild document createTextNode entry title    x000D              container appendChild div   x000D              x000D            x000D            x000D        x000D      google setOnLoadCallback initialize   x000D   lt html gt  x000D     lt head gt      x000D        lt script src  https   rss2json com gfapi js  gt  lt  script gt  x000D     lt  head gt  x000D     lt body gt  x000D       lt p gt  lt b gt Result from the API  lt  b gt  lt  p gt  x000D       lt div id  feed  gt  lt  div gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Parsing the Feed  With jQuery s jFeed   Don t really recommend that one  see the other options    jQuery getFeed      url       FEED URL     success   function  feed          console log feed title            do more stuff here            With jQuery s Built-in XML Support    get FEED URL  function  data          data  find  entry   each function         or  item  or whatever suits your feed         var el     this            console log  ------------------------            console log  title            el find  title   text             console log  author           el find  author   text             console log  description      el find  description   text                   With jQuery and the Google AJAX Feed API    ajax     url        document location protocol      ajax googleapis com ajax services feed load v 1 0 amp num 10 amp callback   amp q     encodeURIComponent FEED URL     dataType    json     success    function  data        if  data responseData feed  amp  amp  data responseData feed entries            each data responseData feed entries  function  i  e            console log  ------------------------            console log  title            e title           console log  author           e author           console log  description      e description                             But that means you re relient on them being online and reachable     Building Content  Once you ve successfully extracted the information you need from the feed  you could create DocumentFragments  with document createDocumentFragment   containing the elements  created with document createElement    you ll want to inject to display your data     Injecting the content  Select the container element that you want on the page and append your document fragments to it  and simply use innerHTML to replace its content entirely   Something like       rss-viewer   append aDocumentFragmentEntry     or       rss-viewer   0  innerHTML   aDocumentFragmentOfAllEntries innerHTML      Test Data  Using this question s feed  which as of this writing gives    lt  xml version  1 0  encoding  utf-8   gt   lt feed xmlns  http   www w3 org 2005 Atom  xmlns creativeCommons  http   backend userland com creativeCommonsRssModule  xmlns re  http   purl org atompub rank 1 0  gt       lt title type  text  gt How to parse a RSS feed using javascript  - Stack Overflow lt  title gt       lt link rel  self  href  https   stackoverflow com feeds question 10943544  type  application atom xml    gt           lt link rel  hub  href  http   pubsubhubbub appspot com     gt               lt link rel  alternate  href  https   stackoverflow com q 10943544  type  text html    gt       lt subtitle gt most recent 30 from stackoverflow com lt  subtitle gt       lt updated gt 2012-06-08T06 36 47Z lt  updated gt       lt id gt https   stackoverflow com feeds question 10943544 lt  id gt       lt creativeCommons license gt http   www creativecommons org licenses by-sa 3 0 rdf lt  creativeCommons license gt        lt entry gt           lt id gt https   stackoverflow com q 10943544 lt  id gt           lt re rank scheme  http   stackoverflow com  gt 2 lt  re rank gt           lt title type  text  gt How to parse a RSS feed using javascript  lt  title gt           lt category scheme  https   stackoverflow com feeds question 10943544 tags  term  javascript   gt  lt category scheme  https   stackoverflow com feeds question 10943544 tags  term  html5   gt  lt category scheme  https   stackoverflow com feeds question 10943544 tags  term  jquery-mobile   gt           lt author gt               lt name gt Thiru lt  name gt               lt uri gt https   stackoverflow com users 1126255 lt  uri gt           lt  author gt           lt link rel  alternate  href  https   stackoverflow com questions 10943544 how-to-parse-a-rss-feed-using-javascript    gt           lt published gt 2012-06-08T05 34 16Z lt  published gt           lt updated gt 2012-06-08T06 35 22Z lt  updated gt           lt summary type  html  gt               amp lt p amp gt I need to parse the RSS-Feed XML version2 0  using XML and I want to display the parsed detail in HTML page  I tried in many ways  But its not working  My system is running under proxy  since I am new to this field  I don amp  39 t know whether it is possible or not  If any one knows please help me on this  Thanks in advance  amp lt  p amp gt            lt  summary gt       lt  entry gt       lt entry gt           lt id gt https   stackoverflow com questions 10943544 - 10943610 10943610 lt  id gt           lt re rank scheme  http   stackoverflow com  gt 1 lt  re rank gt           lt title type  text  gt Answer by haylem for How to parse a RSS feed using javascript  lt  title gt           lt author gt               lt name gt haylem lt  name gt               lt uri gt https   stackoverflow com users 453590 lt  uri gt           lt  author gt               lt link rel  alternate  href  https   stackoverflow com questions 10943544 how-to-parse-a-rss-feed-using-javascript 10943610 10943610    gt           lt published gt 2012-06-08T05 43 24Z lt  published gt              lt updated gt 2012-06-08T06 35 22Z lt  updated gt           lt summary type  html  gt  amp lt h1 amp gt Parsing the Feed amp lt  h1 amp gt    amp lt h3 amp gt With jQuery amp  39 s jFeed amp lt  h3 amp gt    amp lt p amp gt Try this  with the  amp lt a href  amp quot http   plugins jquery com project jFeed amp quot  rel  amp quot nofollow amp quot  amp gt jFeed amp lt  a amp gt   amp lt a href  amp quot http   www jquery com  amp quot  rel  amp quot nofollow amp quot  amp gt jQuery amp lt  a amp gt  plug-in amp lt  p amp gt    amp lt pre amp gt  amp lt code amp gt jQuery getFeed      url       FEED URL     success   function  feed          console log feed title            do more stuff here           amp lt  code amp gt  amp lt  pre amp gt    amp lt h3 amp gt With jQuery amp  39 s Built-in XML Support amp lt  h3 amp gt    amp lt pre amp gt  amp lt code amp gt   get FEED URL  function  data          data  find  amp quot entry amp quot   each function         or  amp quot item amp quot  or whatever suits your feed         var el     this            console log  amp quot ------------------------ amp quot            console log  amp quot title         amp quot    el find  amp quot title amp quot   text             console log  amp quot author        amp quot    el find  amp quot author amp quot   text             console log  amp quot description   amp quot    el find  amp quot description amp quot   text                  amp lt  code amp gt  amp lt  pre amp gt    amp lt h3 amp gt With jQuery and the Google AJAX APIs amp lt  h3 amp gt    amp lt p amp gt Otherwise   amp lt a href  amp quot https   developers google com feed  amp quot  rel  amp quot nofollow amp quot  amp gt Google amp  39 s AJAX Feed API amp lt  a amp gt  allows you to get the feed as a JSON object  amp lt  p amp gt    amp lt pre amp gt  amp lt code amp gt   ajax     url        document location protocol    amp  39   ajax googleapis com ajax services feed load v 1 0 amp amp amp num 10 amp amp amp callback   amp amp amp q  amp  39    encodeURIComponent FEED URL     dataType    amp  39 json amp  39     success    function  data        if  data responseData feed  amp amp amp  amp amp amp  data responseData feed entries            each data responseData feed entries  function  i  e            console log  amp quot ------------------------ amp quot            console log  amp quot title         amp quot    e title           console log  amp quot author        amp quot    e author           console log  amp quot description   amp quot    e description                            amp lt  code amp gt  amp lt  pre amp gt    amp lt p amp gt But that means you amp  39 re relient on them being online and reachable  amp lt  p amp gt    amp lt hr amp gt    amp lt h1 amp gt Building Content amp lt  h1 amp gt    amp lt p amp gt Once you amp  39 ve successfully extracted the information you need from the feed  you need to create document fragments containing the elements you amp  39 ll want to inject to display your data  amp lt  p amp gt    amp lt hr amp gt    amp lt h1 amp gt Injecting the content amp lt  h1 amp gt    amp lt p amp gt Select the container element that you want on the page and append your document fragments to it  and simply use innerHTML to replace its content entirely  amp lt  p amp gt   lt  summary gt       lt  entry gt  lt  feed gt    Executions  Using jQuery s Built-in XML Support  Invoking     get  https   stackoverflow com feeds question 10943544   function  data          data  find  entry   each function         or  item  or whatever suits your feed         var el     this            console log  ------------------------            console log  title            el find  title   text             console log  author           el find  author   text             console log  description      el find  description   text                   Prints out   ------------------------ title        How to parse a RSS feed using javascript  author                    Thiru             https   stackoverflow com users 1126255  description   ------------------------ title        Answer by haylem for How to parse a RSS feed using javascript  author                    haylem             https   stackoverflow com users 453590  description     Using jQuery and the Google AJAX APIs  Invoking     ajax     url        document location protocol      ajax googleapis com ajax services feed load v 1 0 amp num 10 amp callback   amp q     encodeURIComponent  https   stackoverflow com feeds question 10943544      dataType    json     success    function  data        if  data responseData feed  amp  amp  data responseData feed entries            each data responseData feed entries  function  i  e            console log  ------------------------            console log  title            e title           console log  author           e author           console log  description      e description                             Prints out   ------------------------ title        How to parse a RSS feed using javascript  author       Thiru description  undefined ------------------------ title        Answer by haylem for How to parse a RSS feed using javascript  author       haylem description  undefined

User · Answer

Another deprecated  thanks to  daylight  option  and the easiest for me  this is what I m using for SpokenToday info    The Google Feed API without using JQuery and with only 2 steps    Import the library    lt script type  text javascript  src  https   www google com jsapi  gt  lt  script gt   lt script type  text javascript  gt google load  feeds    1    lt  script gt   Find Load feeds  documentation    var feed   new google feeds Feed  http   www google com trends hottrends atom feed pn p1    feed load function  data           Parse data depending on the specified response format  default is JSON      console dir data        To parse data  check documentation about the response format

User · Answer

I was so exasperated by many misleading articles and answers that I wrote my own RSS reader  https   gouessej wordpress com 2020 06 28 comment-creer-un-lecteur-rss-en-javascript-how-to-create-a-rss-reader-in-javascript  You can use AJAX requests to fetch the RSS files but it will work if and only if you use a CORS proxy  I ll try to write my own CORS proxy to give you a more robust solution  In the meantime  it works  I deployed it on my server under Debian Linux  My solution doesn t use JQuery  I use only plain Javascript standard APIs with no third party libraries and it s supposed to work even with Microsoft Internet Explorer 11

[javascript] How to parse an RSS feed using JavaScript?

Examples related to javascript

Examples related to html

Examples related to rss