在 Angular 应用程序上将 XML RSS 提要转换为 Json
Convert XML RSS feed to Json on Angular app
我有一个 API 这样的 https://blog.com/rss。它 returns 下面 xml 作为博客提要。
Note:这个我看过了。但它适用于 nodejs 应用程序。
https://github.com/nasa8x/rss-to-json
那么你能告诉我如何从中检索 image、title、date 和 description 吗？即 Json 从中输出。
之后我需要像这样在 html 页面上显示：
Note:这只是一个节点。根据提要输出，它将有很多节点。即 ngFor 循环
.html
<div class="card">
<div class="card-wrapper">
<img class="card-img-top" src="../../../assets/img/blog-1.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"> 5 People Management Skills Every Manager Needs</h5>
<span class="card-date">12.12.2018</span>
<p class="card-text">Want to see domain names for sale in your own language? Browse domain names by
languages.</p>
</div>
</div>
https://blog.com/rss输出：
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
<channel>
<title>
<![CDATA[ Blog ]]>
</title>
<description>
<![CDATA[ All Domain Names are Here: Discover! ]]>
</description>
<link>https://blog.com/</link>
<image>
<url>https://blog.com/favicon.png</url>
<title>Blog</title>
<link>https://blog.com/</link>
</image>
<generator>Ghost 2.2</generator>
<lastBuildDate>Sun, 14 Oct 2018 04:11:06 GMT</lastBuildDate>
<atom:link href="https://blog.com/rss/" rel="self" type="application/rss+xml"/>
<ttl>60</ttl>
<item>
<title>
<![CDATA[ All Domain Names are Here: Discover! ]]>
</title>
<description>
<![CDATA[ <p></p> ]]>
</description>
<link>https://blog.com/all-domain-names-are-here/</link>
<guid isPermaLink="false">5b9b82874af81500bf677bca</guid>
<category>
<![CDATA[ Inside]]>
</category>
<dc:creator>
<![CDATA[ na ]]>
</dc:creator>
<pubDate>Sat, 15 Sep 2018 14:00:00 GMT</pubDate>
<content:encoded>
<![CDATA[ <p></p> ]]>
</content:encoded>
</item>
<item>
<title>
<![CDATA[ Week #39 Report ]]>
</title>
<description>
<![CDATA[
<p>Last week (September 24 - September 30, 2018)</p> <h2 id="spanstylecolor4caf501250000spandomainnameswereregistered"><span style="color:#4CAF50">1,250,000</span> domain names were registered.</h2> <h2 id="spanstylecoloref9a9a850000spandomainnamesweredeleted"><span style="color:#EF9A9A">850,000</span> domain names were deleted.</h2> <hr> <h2 id="topkeywords">TOP KEYWORDS</h2> <ol> <li>home</li> <li>shop</li> <li>online</li> <li>life</li> <li>group</li> <li>tech</li> <li>est</li> <li>one</li> <li>pro</li> <li>man</li> </ol> <p>Kaydedilen alan adlarında en çok geçen kelime “blockchain”. Son zamanlarda sürekli olarak oluşturulan yeni coinler ve sistemlerin</p>
]]>
</description>
<link>https://blog.com/2018-week-39-report/</link>
<guid isPermaLink="false">5bae10de6a7d7900bf5d9be3</guid>
<category>
<![CDATA[ Reports ]]>
</category>
<dc:creator>
<![CDATA[ Author Name ]]>
</dc:creator>
<pubDate>Sat, 01 Sep 2018 16:30:00 GMT</pubDate>
<media:content url="https://blog.com/content/images/2018/10/9.jpg" medium="image"/>
<content:encoded>
<![CDATA[
<img src="https://blog.com/content/images/2018/10/9.jpg" alt="Week #39 Report"><p>Last week (September 24 - September 30, 2018)</p> <h2 id="spanstylecolor4caf501250000spandomainnameswereregistered"><span style="color:#4CAF50">1,250,000</span> domain names were registered.</h2> <h2 id="spanstylecoloref9a9a850000spandomainnamesweredeleted"><span style="color:#EF9A9A">850,000</span> domain names were deleted.</h2> <hr> <h2 id="topkeywords">TOP KEYWORDS</h2> <ol> <li>home</li> <li>shop</li> <li>online</li> <li>life</li> <li>group</li> <li>tech</li> <li>est</li> <li>one</li> <li>pro</li> <li>man</li> </ol> <p>Kaydedilen alan adlarında en çok geçen kelime “blockchain”. Son zamanlarda sürekli olarak oluşturulan yeni coinler ve sistemlerin bu kayıtları motive ettiği söylenebilir.</p> <p>Geçen hafta düşen alan adlarında ise en çok geçen kelime “bet”. Birleşik Devletler’de İslâm’ın yayılması ve halkın kumar gibi kötü alışkanlıkları terk etmesi bunun en büyük sebeplerinden biri.</p> <hr> <h2 id="topextensions">TOP EXTENSIONS</h2> <ol> <li>com</li> <li>top</li> <li>net</li> <li>work</li> <li>org</li> <li>info</li> <li>xyz</li> <li>club</li> <li>online</li> <li>site</li> </ol> <p>Radix Registry’nin yaptığı kampanya ile geçen hafta 100.000 alan adı kaydıyla bir önceki haftaya göre %10 artış yakalayan .tech, bu haftanın en çok göze çarpan ngTLD’si oldu. Kayıtlı alan adları bakımından en yüksek oranda artış gösteren ikinci uzantı ise %5 ile .xyz oldu. Toplam ngTLD sayısı ise 20.000 (%2.5) azaldı.</p> <p>Düşen alan adlarından %6’sı aynı hafta içerisinde tekrar kaydedildi. Kayıtların %10’u backorder servisleri kullanılarak gerçekleştirildi. Yeni kayıtların %30’u GoDaddy aracılığıyla yapıldı. Geçen hafta kaydedilen alan adlarının %50’si .com, %10’u .net, %20’si ccTLD’ler ve %15’i de ngTLD’lerden oluşuyor.</p> <hr> <h2 id="topsales">TOP SALES</h2> <ol> <li>6666666.com - ,000</li> <li>lucky.io - ,000</li> <li>tl.net - ,000</li> <li>kju.com - ,100</li> <li>mexicanhotels.com ,465</li> <li>drugwipe.com ,000</li> <li>japanesehotels.com - ,755</li> <li>portwein.de - ,197</li> <li>funeralcare.com - ,139</li> <li>brainbirds.com ,824</li> </ol> <hr> <h2 id="othernewsfromtheindustry">OTHER NEWS FROM THE INDUSTRY</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p></p>
]]>
</content:encoded>
</item>
</channel>
</rss>
希望这个库对您有所帮助：
rss-parser: https://github.com/bobby-brennan/rss-parser
- 这个库支持 NodeJS 和 web
这是在浏览器中使用回调的示例：
<script src="/node_modules/rss-parser/dist/rss-parser.min.js"></script>
<script>
// Note: some RSS feeds can't be loaded in the browser due to CORS security.
// To get around this, you can use a proxy.
const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"
let parser = new RSSParser();
parser.parseURL(CORS_PROXY + 'https://www.reddit.com/.rss', function(err, feed) {
console.log(feed.title);
feed.items.forEach(function(entry) {
console.log(entry.title + ':' + entry.link);
})
})
</script>
我有一个 API 这样的 https://blog.com/rss。它 returns 下面 xml 作为博客提要。
Note:这个我看过了。但它适用于 nodejs 应用程序。
https://github.com/nasa8x/rss-to-json
那么你能告诉我如何从中检索 image、title、date 和 description 吗？即 Json 从中输出。
之后我需要像这样在 html 页面上显示：
Note:这只是一个节点。根据提要输出，它将有很多节点。即 ngFor 循环
.html
<div class="card">
<div class="card-wrapper">
<img class="card-img-top" src="../../../assets/img/blog-1.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"> 5 People Management Skills Every Manager Needs</h5>
<span class="card-date">12.12.2018</span>
<p class="card-text">Want to see domain names for sale in your own language? Browse domain names by
languages.</p>
</div>
</div>
https://blog.com/rss输出：
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
<channel>
<title>
<![CDATA[ Blog ]]>
</title>
<description>
<![CDATA[ All Domain Names are Here: Discover! ]]>
</description>
<link>https://blog.com/</link>
<image>
<url>https://blog.com/favicon.png</url>
<title>Blog</title>
<link>https://blog.com/</link>
</image>
<generator>Ghost 2.2</generator>
<lastBuildDate>Sun, 14 Oct 2018 04:11:06 GMT</lastBuildDate>
<atom:link href="https://blog.com/rss/" rel="self" type="application/rss+xml"/>
<ttl>60</ttl>
<item>
<title>
<![CDATA[ All Domain Names are Here: Discover! ]]>
</title>
<description>
<![CDATA[ <p></p> ]]>
</description>
<link>https://blog.com/all-domain-names-are-here/</link>
<guid isPermaLink="false">5b9b82874af81500bf677bca</guid>
<category>
<![CDATA[ Inside]]>
</category>
<dc:creator>
<![CDATA[ na ]]>
</dc:creator>
<pubDate>Sat, 15 Sep 2018 14:00:00 GMT</pubDate>
<content:encoded>
<![CDATA[ <p></p> ]]>
</content:encoded>
</item>
<item>
<title>
<![CDATA[ Week #39 Report ]]>
</title>
<description>
<![CDATA[
<p>Last week (September 24 - September 30, 2018)</p> <h2 id="spanstylecolor4caf501250000spandomainnameswereregistered"><span style="color:#4CAF50">1,250,000</span> domain names were registered.</h2> <h2 id="spanstylecoloref9a9a850000spandomainnamesweredeleted"><span style="color:#EF9A9A">850,000</span> domain names were deleted.</h2> <hr> <h2 id="topkeywords">TOP KEYWORDS</h2> <ol> <li>home</li> <li>shop</li> <li>online</li> <li>life</li> <li>group</li> <li>tech</li> <li>est</li> <li>one</li> <li>pro</li> <li>man</li> </ol> <p>Kaydedilen alan adlarında en çok geçen kelime “blockchain”. Son zamanlarda sürekli olarak oluşturulan yeni coinler ve sistemlerin</p>
]]>
</description>
<link>https://blog.com/2018-week-39-report/</link>
<guid isPermaLink="false">5bae10de6a7d7900bf5d9be3</guid>
<category>
<![CDATA[ Reports ]]>
</category>
<dc:creator>
<![CDATA[ Author Name ]]>
</dc:creator>
<pubDate>Sat, 01 Sep 2018 16:30:00 GMT</pubDate>
<media:content url="https://blog.com/content/images/2018/10/9.jpg" medium="image"/>
<content:encoded>
<![CDATA[
<img src="https://blog.com/content/images/2018/10/9.jpg" alt="Week #39 Report"><p>Last week (September 24 - September 30, 2018)</p> <h2 id="spanstylecolor4caf501250000spandomainnameswereregistered"><span style="color:#4CAF50">1,250,000</span> domain names were registered.</h2> <h2 id="spanstylecoloref9a9a850000spandomainnamesweredeleted"><span style="color:#EF9A9A">850,000</span> domain names were deleted.</h2> <hr> <h2 id="topkeywords">TOP KEYWORDS</h2> <ol> <li>home</li> <li>shop</li> <li>online</li> <li>life</li> <li>group</li> <li>tech</li> <li>est</li> <li>one</li> <li>pro</li> <li>man</li> </ol> <p>Kaydedilen alan adlarında en çok geçen kelime “blockchain”. Son zamanlarda sürekli olarak oluşturulan yeni coinler ve sistemlerin bu kayıtları motive ettiği söylenebilir.</p> <p>Geçen hafta düşen alan adlarında ise en çok geçen kelime “bet”. Birleşik Devletler’de İslâm’ın yayılması ve halkın kumar gibi kötü alışkanlıkları terk etmesi bunun en büyük sebeplerinden biri.</p> <hr> <h2 id="topextensions">TOP EXTENSIONS</h2> <ol> <li>com</li> <li>top</li> <li>net</li> <li>work</li> <li>org</li> <li>info</li> <li>xyz</li> <li>club</li> <li>online</li> <li>site</li> </ol> <p>Radix Registry’nin yaptığı kampanya ile geçen hafta 100.000 alan adı kaydıyla bir önceki haftaya göre %10 artış yakalayan .tech, bu haftanın en çok göze çarpan ngTLD’si oldu. Kayıtlı alan adları bakımından en yüksek oranda artış gösteren ikinci uzantı ise %5 ile .xyz oldu. Toplam ngTLD sayısı ise 20.000 (%2.5) azaldı.</p> <p>Düşen alan adlarından %6’sı aynı hafta içerisinde tekrar kaydedildi. Kayıtların %10’u backorder servisleri kullanılarak gerçekleştirildi. Yeni kayıtların %30’u GoDaddy aracılığıyla yapıldı. Geçen hafta kaydedilen alan adlarının %50’si .com, %10’u .net, %20’si ccTLD’ler ve %15’i de ngTLD’lerden oluşuyor.</p> <hr> <h2 id="topsales">TOP SALES</h2> <ol> <li>6666666.com - ,000</li> <li>lucky.io - ,000</li> <li>tl.net - ,000</li> <li>kju.com - ,100</li> <li>mexicanhotels.com ,465</li> <li>drugwipe.com ,000</li> <li>japanesehotels.com - ,755</li> <li>portwein.de - ,197</li> <li>funeralcare.com - ,139</li> <li>brainbirds.com ,824</li> </ol> <hr> <h2 id="othernewsfromtheindustry">OTHER NEWS FROM THE INDUSTRY</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p></p>
]]>
</content:encoded>
</item>
</channel>
</rss>
希望这个库对您有所帮助：
rss-parser: https://github.com/bobby-brennan/rss-parser
- 这个库支持 NodeJS 和 web
这是在浏览器中使用回调的示例：
<script src="/node_modules/rss-parser/dist/rss-parser.min.js"></script>
<script>
// Note: some RSS feeds can't be loaded in the browser due to CORS security.
// To get around this, you can use a proxy.
const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"
let parser = new RSSParser();
parser.parseURL(CORS_PROXY + 'https://www.reddit.com/.rss', function(err, feed) {
console.log(feed.title);
feed.items.forEach(function(entry) {
console.log(entry.title + ':' + entry.link);
})
})
</script>