How do I parse html elements from an observable array of objects in rxjs

Question

In angular 8 I am parsing a wordpress rss feed and using one of its properties, 'content' to build a news scroller. The rss feed is processed into a javascript object using rss-parser from node.js.

I need to parse out a http link, an image and a few chars of text from between paragraph (p) elements'. My problem is that the data I need is contained within the 'content' property and I don't know the encoding or how to parse out the link, image and text and place them into variables I can use within the observable.

Using Angular and rxjs I am able to derive an array of objects that includes each article and the property I need. const http$ = this.api.rssSource$(); which is from the angular api.service.ts that gets the feed and returns an observable. Then I map it down to the array of objects using this code:

this.newsItems$ = http$ .pipe( map(res => Object.values(res['items']))); and I get this array of 20 items

(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

each object within the array above looks like this:

{content: "<a href="https://example.com/"><img width="300" height="200" src="https://example.com/some-image-300x200.jpeg" alt="blah blah blah" /></a><p>A lot of text about something and then something else</p><br /><p>jabber jabber and more jabber</p>↵<p><a href="https://example.com/example.html/" rel="nofollow">...Read More About Blah And Jabber</a></p>↵}

using <div [innerHTML]="item.content"></div> in the angular template I can render html with an image and a lot of text. However, it is not in the format I want and needs to be shortened and re-arranged. I only need the complete 'a href="https://xxx..." ', 'img src="http://xxx..." ' and a single 'p xxxx /p'.

How can I access the object so that I can then further parse it to populate variables for newsLink, newsImg, shortDes?

Answer 1

If what you wish to do is manipulate each Object in the emitted array, you can add an array map call inside the RxJS map call:

this.newsItems$ = http$.pipe(
  map(res => Object.values(res['items']).map(item => {
    // do item modification here
  }))
);

This will return the modified array. Alternatively, you can split the array and have it emitted as individual values, and then RxJS map them to modify them:

this.newsItems$ = http$.pipe(
  switchMap(items => from(items)),
  map(item => // manipulate individual items here)
);

As for the actual parsing itself, that can be achieved using regular expressions and the match() function:

arrayOfAnchorTags = item.content.match(/<\s*a[^>]*>(.*?)<\/\s*\s*a>/g);