How to make an RSS feed work on Angular 4?

Navigation
-2

The code below is working on a HTML page 

  

  <html>
        <head>
            <title>Titulo da página</title>
            <meta charset="utf-8">
            <script type="text/javascript"> 
                rssfeed_url = new Array(); 
                rssfeed_url[0]="http://esporte.uol.com.br/ultimas/index.xml";  
                rssfeed_frame_width="300"; 
                rssfeed_frame_height="260"; 
                rssfeed_scroll="on"; 
                rssfeed_scroll_step="6"; 
                rssfeed_scroll_bar="off"; 
                rssfeed_target="_blank"; 
                rssfeed_font_size="12"; 
                rssfeed_font_face=""; 
                rssfeed_border="on"; 
                rssfeed_css_url=""; 
                rssfeed_title="on"; 
                rssfeed_title_name=""; 
                rssfeed_title_bgcolor="#3366ff"; 
                rssfeed_title_color="#fff"; 
                rssfeed_title_bgimage=""; 
                rssfeed_footer="off"; 
                rssfeed_footer_name="rss feed"; 
                rssfeed_footer_bgcolor="#fff"; 
                rssfeed_footer_color="#333"; 
                rssfeed_footer_bgimage=""; 
                rssfeed_item_title_length="50"; 
                rssfeed_item_title_color="#666"; 
                rssfeed_item_bgcolor="#fff"; 
                rssfeed_item_bgimage=""; 
                rssfeed_item_border_bottom="on"; 
                rssfeed_item_source_icon="off"; 
                rssfeed_item_date="off"; 
                rssfeed_item_description="on"; 
                rssfeed_item_description_length="120"; 
                rssfeed_item_description_color="#666"; 
                rssfeed_item_description_link_color="#333"; 
                rssfeed_item_description_tag="off"; 
                rssfeed_no_items="0"; 
                rssfeed_cache = "e90320463f8111afd3b519c711ff89e3"; 
            </script> 

            <script type="text/javascript" src="https://feed.surfing-waves.com/js/rss-feed.js"></script></head><body><divstyle="text-align:right; width:300px;">powered by <a href="http://www.surfing-waves.com" rel="noopener" target="_blank" style="color:#ccc;font-size:10px">Surfing Waves</a></div> 
        </body>
    </html>

How could you make it work on an angular design 4?

    
asked by anonymous 18.04.2018 / 19:28

1 answer

1

You can download the document using HttpClient and you can use:

Basic example: 

import { HttpClient } from '@angular/common/http';

...

title = '';
description = '';

constructor(private http: HttpClient) { }

...

downloadXml() {
    this.http.get("http://site.com/feed.rss").subscribe(res => {
         parseXml(res); //Baixo o XML
    }, err => {
         console.log(err);
    });
}

...

parseXml(data) {
    let parser = new DOMParser;
    let doc = parser.parseFromString(data, "application/xml");

    this.title = doc.querySelector("channel > title").text;
    this.description = doc.querySelector("channel > description").text;

    ...
}

And in HTML would look something like: 

<h1>{{title}}</h1>
<h2>{{description}}</h2>

To get the items you will have to go iterating with for and taking only the texts, for example: 

title = '';
description = '';
items = [];

constructor(private http: HttpClient) { }

...

parseXml(data) {
    let parser = new DOMParser;
    let doc = parser.parseFromString(data, "application/xml");

    this.title = doc.querySelector("channel > title").text;
    this.description = doc.querySelector("channel > description").text;

    let items = doc.querySelectorAll("channel > item");
    let objs = [];

    for (let el of items) {
         let obj = {
             "link": el.querySelector("link"),
             "title": el.querySelector("title"),
             "description": el.querySelector("description")
         };

         objs.push(obj);
    }

    this.items = objs;
}

And in HTML it would look like this (using *ngIf to check if something exists and *ngFor to iterate values in this.items ): 

<h1>{{title}}</h1>
<h2>{{description}}</h2>

<div *ngIf="items.length">
    <div *ngFor="let item of items">
        <h3><a href="{{item.link}}">{{item.title}}</a></h3>
        <p>{{item.description}}</p>
    </div>
</div>
    
18.04.2018 / 19:58
exercise javascript How to translate "rows selected" in datatables js