Bagaimana cara mengurai RSS feed menggunakan JavaScript?

116

Saya perlu mengurai RSS feed (XML versi 2.0) dan menampilkan detail parsing di halaman HTML.

Thiru
sumber
12
1) Apa sebenarnya yang sudah Anda coba? 2) Apa sebenarnya yang ingin Anda parse? (info mana yang ingin Anda ekstrak dari feed?) 3) Di mana tepatnya Anda ingin menampilkannya di halaman Anda? 4) Apa sebenarnya markup HTML Anda? Singkatnya, kita semua suka berpura-pura bahwa kita adalah David Copperfield, tapi saya tidak yakin kita akan membodohi penonton terlalu lama.
haylem
Tidak, saya memiliki umpan berturut-turut dengan saya. Saya tidak bisa mempublikasikannya. Itulah mengapa saya menaruh sampel di sini
Thiru
ok tapi itu BUKAN sampel. Itu hanya URL ke halaman yang tidak ada. Dalam hal ini jawaban saya memiliki "sampel". Ini adalah variabel FEED_URL. Taruh saja apa yang Anda butuhkan di sana. Jika Anda memerlukan bantuan lebih lanjut, Anda juga perlu memberikan detail lebih lanjut tentang elemen feed mana yang Anda butuhkan, tampilan HTMK stub seperti apa, di mana Anda ingin memasukkan stub HTML yang dihasilkan, dan Anda juga dapat memberikan contoh nyata RSS feed Anda (cukup salin pase kutipan dan ganti konten aktual dengan placeholder).
haylem

Jawaban:

216

Parsing Feed

Dengan jQuery 's jFeed

(Jangan terlalu merekomendasikan yang itu, lihat opsi lainnya.)

jQuery.getFeed({
   url     : FEED_URL,
   success : function (feed) {
      console.log(feed.title);
      // do more stuff here
   }
});

Dengan Dukungan XML Built-in jQuery

$.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());
    });
});

Dengan jQuery dan Google AJAX Feed API

$.ajax({
  url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(FEED_URL),
  dataType : 'json',
  success  : function (data) {
    if (data.responseData.feed && 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);
      });
    }
  }
});

Tetapi itu berarti Anda mengandalkan mereka untuk online dan dapat dihubungi.


Membangun Konten

Setelah Anda berhasil mengekstrak informasi yang Anda butuhkan dari feed, Anda dapat membuat DocumentFragments (dengan document.createDocumentFragment()berisi elemen (dibuat dengan document.createElement()) yang ingin Anda masukkan untuk menampilkan data Anda.


Menyuntikkan konten

Pilih elemen kontainer yang Anda inginkan pada halaman dan tambahkan fragmen dokumen Anda ke dalamnya, dan cukup gunakan innerHTML untuk mengganti kontennya sepenuhnya.

Sesuatu seperti:

$('#rss-viewer').append(aDocumentFragmentEntry);

atau:

$('#rss-viewer')[0].innerHTML = aDocumentFragmentOfAllEntries.innerHTML;

Uji Data

Menggunakan feed pertanyaan ini , yang pada tulisan ini memberikan:

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule" xmlns:re="http://purl.org/atompub/rank/1.0">
    <title type="text">How to parse a RSS feed using javascript? - Stack Overflow</title>
    <link rel="self" href="https://stackoverflow.com/feeds/question/10943544" type="application/atom+xml" />
        <link rel="hub" href="http://pubsubhubbub.appspot.com/" />        
    <link rel="alternate" href="https://stackoverflow.com/q/10943544" type="text/html" />
    <subtitle>most recent 30 from stackoverflow.com</subtitle>
    <updated>2012-06-08T06:36:47Z</updated>
    <id>https://stackoverflow.com/feeds/question/10943544</id>
    <creativeCommons:license>http://www.creativecommons.org/licenses/by-sa/3.0/rdf</creativeCommons:license> 
    <entry>
        <id>https://stackoverflow.com/q/10943544</id>
        <re:rank scheme="http://stackoverflow.com">2</re:rank>
        <title type="text">How to parse a RSS feed using javascript?</title>
        <category scheme="https://stackoverflow.com/feeds/question/10943544/tags" term="javascript"/><category scheme="https://stackoverflow.com/feeds/question/10943544/tags" term="html5"/><category scheme="https://stackoverflow.com/feeds/question/10943544/tags" term="jquery-mobile"/>
        <author>
            <name>Thiru</name>
            <uri>https://stackoverflow.com/users/1126255</uri>
        </author>
        <link rel="alternate" href="/programming/10943544/how-to-parse-a-rss-feed-using-javascript" />
        <published>2012-06-08T05:34:16Z</published>
        <updated>2012-06-08T06:35:22Z</updated>
        <summary type="html">
            &lt;p&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&#39;t know whether it is possible or not. If any one knows please help me on this. Thanks in advance.&lt;/p&gt;

        </summary>
    </entry>
    <entry>
        <id>https://stackoverflow.com/questions/10943544/-/10943610#10943610</id>
        <re:rank scheme="http://stackoverflow.com">1</re:rank>
        <title type="text">Answer by haylem for How to parse a RSS feed using javascript?</title>
        <author>
            <name>haylem</name>
            <uri>https://stackoverflow.com/users/453590</uri>
        </author>    
        <link rel="alternate" href="/programming/10943544/how-to-parse-a-rss-feed-using-javascript/10943610#10943610" />
        <published>2012-06-08T05:43:24Z</published>   
        <updated>2012-06-08T06:35:22Z</updated>
        <summary type="html">&lt;h1&gt;Parsing the Feed&lt;/h1&gt;

&lt;h3&gt;With jQuery&#39;s jFeed&lt;/h3&gt;

&lt;p&gt;Try this, with the &lt;a href=&quot;http://plugins.jquery.com/project/jFeed&quot; rel=&quot;nofollow&quot;&gt;jFeed&lt;/a&gt; &lt;a href=&quot;http://www.jquery.com/&quot; rel=&quot;nofollow&quot;&gt;jQuery&lt;/a&gt; plug-in&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;jQuery.getFeed({
   url     : FEED_URL,
   success : function (feed) {
      console.log(feed.title);
      // do more stuff here
   }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;h3&gt;With jQuery&#39;s Built-in XML Support&lt;/h3&gt;

&lt;pre&gt;&lt;code&gt;$.get(FEED_URL, function (data) {
    $(data).find(&quot;entry&quot;).each(function () { // or &quot;item&quot; or whatever suits your feed
        var el = $(this);

        console.log(&quot;------------------------&quot;);
        console.log(&quot;title      : &quot; + el.find(&quot;title&quot;).text());
        console.log(&quot;author     : &quot; + el.find(&quot;author&quot;).text());
        console.log(&quot;description: &quot; + el.find(&quot;description&quot;).text());
    });
});
&lt;/code&gt;&lt;/pre&gt;

&lt;h3&gt;With jQuery and the Google AJAX APIs&lt;/h3&gt;

&lt;p&gt;Otherwise, &lt;a href=&quot;https://developers.google.com/feed/&quot; rel=&quot;nofollow&quot;&gt;Google&#39;s AJAX Feed API&lt;/a&gt; allows you to get the feed as a JSON object:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;$.ajax({
  url      : document.location.protocol + &#39;//ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;amp;num=10&amp;amp;callback=?&amp;amp;q=&#39; + encodeURIComponent(FEED_URL),
  dataType : &#39;json&#39;,
  success  : function (data) {
    if (data.responseData.feed &amp;amp;&amp;amp; data.responseData.feed.entries) {
      $.each(data.responseData.feed.entries, function (i, e) {
        console.log(&quot;------------------------&quot;);
        console.log(&quot;title      : &quot; + e.title);
        console.log(&quot;author     : &quot; + e.author);
        console.log(&quot;description: &quot; + e.description);
      });
    }
  }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;But that means you&#39;re relient on them being online and reachable.&lt;/p&gt;

&lt;hr&gt;

&lt;h1&gt;Building Content&lt;/h1&gt;

&lt;p&gt;Once you&#39;ve successfully extracted the information you need from the feed, you need to create document fragments containing the elements you&#39;ll want to inject to display your data.&lt;/p&gt;

&lt;hr&gt;

&lt;h1&gt;Injecting the content&lt;/h1&gt;

&lt;p&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.&lt;/p&gt;
</summary>
    </entry></feed>

Eksekusi

Menggunakan Dukungan XML Built-in jQuery

Memohon:

$.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());
    });
});

Cetakan:

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

Menggunakan jQuery dan Google AJAX API

Memohon:

$.ajax({
  url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('https://stackoverflow.com/feeds/question/10943544'),
  dataType : 'json',
  success  : function (data) {
    if (data.responseData.feed && 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);
      });
    }
  }
});

Cetakan:

------------------------
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
haylem
sumber
1
Terima kasih atas jawaban Anda haylem. Tapi saya tidak mendapatkan hasil untuk ini. Apakah mungkin dengan javascript?
Thiru
1
@Thiru: Saya baru saja mencoba metode terakhir dengan umpan RSS pertanyaan ini ( stackoverflow.com/feeds/question/10943544 ) dan itu bekerja dengan baik untuk saya.
haylem
8
Anda mungkin memiliki seluruh cuplikan kode yang berfungsi di sini. Saya yakin Anda bisa mengerjakan sisanya sendiri.
haylem
2
@Timmy: melakukan apa? Apakah kamu teman Thiru? Anda memiliki teknik pelaporan masalah yang serupa. Saya baru saja menyalin-tempel 2 cuplikan kode terakhir ke konsol saya dan menjalankannya dan mendapatkan keluaran seperti yang diharapkan. Apa yang Anda lakukan, bagaimana, untuk sumber daya apa?
haylem
2
Google AJAX API tidak digunakan lagi. Ini tidak tersedia sejak Januari 2017.
Ezee
39

Opsi lain yang tidak digunakan lagi (berkat @daylight) , dan yang paling mudah bagi saya (inilah yang saya gunakan untuk SpokenToday.info ):

The Google API Pakan tanpa menggunakan JQuery dan dengan hanya 2 langkah:

  1. Impor perpustakaan:

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("feeds", "1");</script>
    
  2. Temukan / Muat feed ( dokumentasi ):

    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);
    });
    
  3. Untuk mengurai data, periksa dokumentasi tentang format respons .

Nahuel Barrios
sumber
5
Google mengatakan: API ini secara resmi tidak digunakan lagi.
23
Google Feed API sudah tidak digunakan lagi dan tidak lagi berfungsi mulai 12/02/2015. Nyebelin
raddevus
berdasarkan kode itu, dapatkah Anda menambahkan prompt untuk memasukkan url umpan, lalu menggabungkan properti untuk menyertakan nilai untuk mengurai rss feed apa pun yang Anda inginkan? misalnya, jika saya berurusan dengan banyak gambar, saya dapat menggabungkan string dan nilai:document.getElementById('image').style.backgroundImage = "url('" + src + "')";
noobninja
2
Google AJAX API tidak digunakan lagi. Tidak tersedia sejak Jan 2017
Ezee
7
ada yang tahu tentang alternatif yang cocok sekarang karena API Google sedang tidak aktif?
duellsy
3

Jika Anda mencari alternatif sederhana dan gratis untuk Google Feed API untuk widget rss Anda, rss2json.com bisa menjadi solusi yang cocok untuk itu.

Anda dapat mencoba melihat cara kerjanya pada kode sampel dari dokumentasi api di bawah ini:

google.load("feeds", "1");

    function initialize() {
      var feed = new google.feeds.Feed("https://news.ycombinator.com/rss");
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement("div");
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);
<html>
  <head>    
     <script src="https://rss2json.com/gfapi.js"></script>
  </head>
  <body>
    <p><b>Result from the API:</b></p>
    <div id="feed"></div>
  </body>
</html>

Chetabahana
sumber
3

Bagi orang lain yang membaca ini (pada 2019 dan seterusnya) sayangnya sebagian besar implementasi membaca RSS JS sekarang tidak berfungsi. Pertama, Google API telah ditutup, jadi ini bukan lagi opsi dan karena kebijakan keamanan CORS, Anda biasanya tidak dapat meminta umpan RSS lintas domain sekarang.

Menggunakan contoh di https://www.raymondcamden.com/2015/12/08/parsing-rss-feeds-in-javascript-options (2015) saya mendapatkan yang berikut:

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.

Ini benar dan merupakan tindakan pencegahan keamanan oleh situs web akhir tetapi sekarang berarti bahwa jawaban di atas tidak mungkin berfungsi.

Solusi saya mungkin akan mengurai umpan RSS melalui PHP dan mengizinkan javascript untuk mengakses PHP saya daripada mencoba mengakses umpan tujuan akhir itu sendiri.

Ukuser32
sumber
1

Jika Anda ingin menggunakan API javascript biasa, ada contoh yang bagus di https://github.com/hongkiat/js-rss-reader/

Deskripsi lengkapnya di https://www.hongkiat.com/blog/rss-reader-in-javascript/

Ini menggunakan fetchmetode sebagai metode global yang mengambil sumber daya secara asinkron. Di bawah ini adalah cuplikan kode:

fetch(websiteUrl).then((res) => {
  res.text().then((htmlTxt) => {
    var domParser = new DOMParser()
    let doc = domParser.parseFromString(htmlTxt, 'text/html')
    var feedUrl = doc.querySelector('link[type="application/rss+xml"]').href
  })
}).catch(() => console.error('Error in fetching the website'))
Alireza Fattahi
sumber
Contoh di artikel yang Anda kutip tidak berfungsi sebagaimana mestinya. Anda perlu memodifikasi baris 15 dan 26 di rss.js untuk menggunakan proxy CORS untuk membuatnya bekerja. Jika tidak, Anda akan mendapatkan beberapa kesalahan karena kebijakan Asal yang Sama: developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/… Selain itu, fetch API tidak berfungsi di Microsoft Internet Explorer 11, lebih baik gunakan XMLHTTPRequest: developer.microsoft.com/en-us/microsoft-edge/status/fetchapi Saya menggunakan kode sumber ini di server saya sendiri. Saya mendorong Anda untuk meluangkan waktu untuk melakukan beberapa pemeriksaan sebelum memposting.
gouessej
Masalah CORS tidak terkait dengan jawaban ini. Harap baca kembali tautan CORS yang Anda sebutkan atau beberapa sumber lain tentang memperbaiki masalah CORS stackoverflow.com/questions/10636611/… .
Alireza Fattahi
Tidak, masalah CORS terkait dengan jawaban Anda. Contoh dalam artikel yang Anda kutip tidak dapat digunakan apa adanya dan jelas terserah pada host untuk mengatur header tersebut, tidak dapat diperbaiki di sisi klien, satu-satunya solusi adalah menggunakan proxy CORS. Apakah Anda pernah mencoba kode sumber yang disebutkan di artikel ini?
gouessej
Tentu saja, kami menggunakannya dalam aplikasi seluler hybrid tanpa masalah apa pun.
Alireza Fattahi
Seorang kontributor Mozilla yang menutup pertanyaan saya tentang penggunaan kode sumber ini dalam proyek saya sendiri menyarankan saya untuk menggunakan proxy CORS. Ini dapat bekerja di sisi server, mungkin di Node.JS tetapi tidak dapat berfungsi seperti di sisi klien. Saya bukan satu-satunya orang yang memiliki masalah ini dengan kode sumber ini dan saya melihat beberapa komentar di artikel serupa di css-trick: css-tricks.com/how-to-fetch-and-parse-rss-feeds-in -javascript /… Anda berada dalam kasus yang sangat spesifik.
gouessej
0

Anda dapat menggunakan jquery-rss atau Vanilla RSS , yang dilengkapi dengan template yang bagus dan sangat mudah digunakan:

// Example for jquery.rss
$("#your-div").rss("https://stackoverflow.com/feeds/question/10943544", {
    limit: 3,
    layoutTemplate: '<ul class="inline">{entries}</ul>',
    entryTemplate: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>'
})

// 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(() => {
  console.log('Everything is loaded and rendered');
});

Lihat http://jsfiddle.net/sdepold/ozq2dn9e/1/ untuk contoh yang berfungsi.

sdepold
sumber
0

Mencoba menemukan solusi yang baik untuk ini sekarang, saya kebetulan menggunakan FeedEk jQuery RSS / ATOM Feed Plugin yang melakukan pekerjaan yang baik dalam mem -parse dan menampilkan RSS dan Atom feed melalui jQuery Feed API . Untuk umpan RSS berbasis XML dasar, menurut saya ini berfungsi seperti pesona dan tidak memerlukan skrip sisi server atau solusi CORS lainnya untuk menjalankannya bahkan secara lokal.

jimiayler
sumber
0

Saya sangat jengkel dengan banyak artikel dan jawaban yang menyesatkan sehingga saya menulis pembaca RSS saya sendiri: https://gouessej.wordpress.com/2020/06/28/comment-creer-un-lecteur-rss-en-javascript-how- untuk-membuat-a-rss-reader-in-javascript /

Anda dapat menggunakan permintaan AJAX untuk mengambil file RSS tetapi ini akan berfungsi jika dan hanya jika Anda menggunakan proxy CORS. Saya akan mencoba menulis proxy CORS saya sendiri untuk memberi Anda solusi yang lebih kuat. Sementara itu, ini berfungsi, saya menerapkannya di server saya di bawah Debian Linux.

Solusi saya tidak menggunakan JQuery, saya hanya menggunakan API standar Javascript biasa tanpa perpustakaan pihak ketiga dan seharusnya berfungsi bahkan dengan Microsoft Internet Explorer 11.

gouessej
sumber