在 Angular 应用程序上将 XML RSS 提要转换为 Json [英] Convert XML RSS feed to Json on Angular app

查看:19
本文介绍了在 Angular 应用程序上将 XML RSS 提要转换为 Json的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个这样的 API https://blog.com/rss.它在 xml 下方作为博客提要返回.

注意: 我见过这个.但它适用于 nodejs 应用程序.https://github.com/nasa8x/rss-to-json

那么你能告诉我如何检索 image,title,date 和它?即它的 Json 输出.

之后我需要像这样在html页面上显示:

注意: 这只是一个节点.根据提要输出,它将有许多节点.即 ngFor 循环

.html

 

<div class="card-wrapper"><img class="card-img-top" src="../../../assets/img/blog-1.png" alt="卡片图片上限"><div class="card-body"><h5 class="card-title">每个经理都需要的 5 项人员管理技能<span class="card-date">12.12.2018</span><p class="card-text">想要查看以您自己的语言出售的域名吗?浏览域名</p>

https://blog.com/rss 输出:

这个 XML 文件似乎没有任何相关的样式信息.文档树如下所示.<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"><频道><标题><![CDATA[博客]]><说明><![CDATA[所有域名都在这里:发现!]]></描述><link>https://blog.com/</link><图像><url>https://blog.com/favicon.png</url><title>博客</title><link>https://blog.com/</link></图像><generator>Ghost 2.2</generator><lastBuildDate>星期日,2018 年 10 月 14 日 04:11:06 GMT</lastBuildDate><atom:link href="https://blog.com/rss/" rel="self" type="application/rss+xml"/><ttl>60</ttl><项目><标题><![CDATA[所有域名都在这里:发现!]]><说明><![CDATA[ <p></p>]]></描述><link>https://blog.com/all-domain-names-are-here/</link><guid isPermaLink="false">5b9b82874af81500bf677bca</guid><类别><![CDATA[内部]]></类别><dc:creator><![CDATA[ na ]]></dc:creator><pubDate>2018 年 9 月 15 日星期六 14:00:00 GMT</pubDate><内容:编码><![CDATA[ <p></p>]]></content:encoded></项目><项目><标题><![CDATA[第 39 周报告]]><说明><![CDATA[<p>上周(2018 年 9 月 24 日至 9 月 30 日)</p><h2 id="spanstylecolor4caf501250000spandomainnameswereregistered"><span style="color:#4CAF50">1,250,000</span>域名已注册.<h2 id="spanstylecoloref9a9a850000spandomainnamesweredeleted"><span style="color:#EF9A9A">850,000</span>域名被删除.<小时><h2 id="topkeywords">TOP KEYWORDS</h2><ol><li>家</li><li>shop</li><li>在线</li><li>生活</li><li>组</li><li>技术</li><li>est</li><li>一个</li><li>pro</li><li>man</li></ol><p>Kaydedilen alan adlarında en çok geçen kelime 区块链".儿子 zamanlarda sürekli olarak oluşturulan Yini coinler ve sistemlerin</p>]]></描述><link>https://blog.com/2018-week-39-report/</link><guid isPermaLink="false">5bae10de6a7d7900bf5d9be3</guid><类别><![CDATA[报告]]></类别><dc:creator><![CDATA[作者姓名]]></dc:creator><pubDate>2018 年 9 月 1 日星期六 16:30:00 GMT</pubDate><media:content url="https://blog.com/content/images/2018/10/9.jpg" medium="image"/><内容:编码><![CDATA[<img src="https://blog.com/content/images/2018/10/9.jpg" alt="Week #39 Report"><p>上周(2018 年 9 月 24 日至 9 月 30 日))

<h2 id="spanstylecolor4caf501250000spandomainnameswereregistered"><span style="color:#4CAF50">1,250,000</span>域名已注册.<h2 id="spanstylecoloref9a9a850000spandomainnamesweredeleted"><span style="color:#EF9A9A">850,000</span>域名被删除.<小时><h2 id="topkeywords">TOP KEYWORDS</h2><ol><li>家</li><li>shop</li><li>在线</li><li>生活</li><li>组</li><li>技术</li><li>est</li><li>one</li><li>pro</li><li>man</li></ol><p>Kaydedilen alan adlarında en çok geçen kelime 区块链".儿子 zamanlarda sürekli olarak oluşturulan Yini 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赌注".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><小时><h2 id="topextensions">TOP EXTENSIONS</h2><ol><li>com</li><li>顶部</li><li>net</li><li>工作</li><li>org</li><li>信息</li><li>xyz</li><li>俱乐部</li><li>在线</li><li>站点</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.Darpan oldsiKayı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 缺货 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><小时><h2 id="topsales">TOP SALES</h2><ol><li>6666666.com - $71,000</li><li>lucky.io - $67,000</li><li>tl.net - $40,000</li><li>kju.com - $14,100</li><li>mexicanhotels.com $9,465</li><li>drugwipe.com $7,000</li><li>japanesehotels.com - $6,755</li><li>portwein.de - $6,197</li><li>funeralcare.com - $6,139</li><li>brainbirds.com $5,824</li></ol><小时><h2 id="othernewsfromtheindustry">来自行业的其他新闻</h2><p>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来,Lorem Ipsum 一直是行业标准的虚拟文本,当时一位不知名的印刷商使用了一个类型的厨房,并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪,而且还经历了电子排版的飞跃,基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行,最近随着桌面出版软件(如 Aldus PageMaker 包括 Lorem Ipsum 的版本)而流行.<p></p>]]></content:encoded></项目></频道></rss>

解决方案

希望这个库对你有帮助:

<块引用>

rss-parser:https://github.com/bobby-brennan/rss-parser

- 这个库支持 NodeJS 和 web

以下是浏览器中使用回调的示例:

<script src="/node_modules/rss-parser/dist/rss-parser.min.js"></script><脚本>//注意:由于 CORS 安全性,某些 RSS 提要无法在浏览器中加载.//为了解决这个问题,你可以使用代理.const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"让解析器 = 新 RSSParser();parser.parseURL(CORS_PROXY + 'https://www.reddit.com/.rss', function(err, feed) {控制台.log(feed.title);feed.items.forEach(function(entry) {console.log(entry.title + ':' + entry.link);})})

I have an API like this https://blog.com/rss. It returns below xml as blog feed.

Note: I have seen this. But it is for nodejs app. https://github.com/nasa8x/rss-to-json

So can you tell me how can I retrieve the image,title,date and the description from it? i.e. Json output from it.

After that I need to show that on the html page like so:

Note: This is just one node. It'll have many nodes according to the feed output. i.e. ngFor loop

.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 out put:

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 - $71,000</li> <li>lucky.io - $67,000</li> <li>tl.net - $40,000</li> <li>kju.com - $14,100</li> <li>mexicanhotels.com $9,465</li> <li>drugwipe.com $7,000</li> <li>japanesehotels.com - $6,755</li> <li>portwein.de - $6,197</li> <li>funeralcare.com - $6,139</li> <li>brainbirds.com $5,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>

解决方案

Hope you will find this library helpful:

rss-parser: https://github.com/bobby-brennan/rss-parser

- This library supports NodeJS and web

Here's an example in the browser using callbacks:

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

这篇关于在 Angular 应用程序上将 XML RSS 提要转换为 Json的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆