Hello there! I am currently utilizing Angular 2 on the frontend with a WordPress REST API backend. I'm receiving a JSON response from the service, however, the WP rest API sends the content with HTML tags and images embedded. I'm having trouble separating this content to use it in my HTML format. I would like the image and text to be displayed in different sections, and also remove the
tag from the content.Here is an example of the service:
@Injectable()
export class VtkraHomeService {
private url = 'http://myapplication.com/wp-json/wp/v2/posts';
private headers = new Headers({'Content-Type': 'application/json'});
constructor (private http : Http){
}
getFeeds(){
return this.http
.get(this.url)
//.then( (res) => res.json);
.map((res: Response) => res.json());
}
And here is an example component:
export class HomeComponent implements OnInit {
homefeed: any;
showLoader = false;
constructor( private VtkraHomeService: VtkraHomeService ) { }
getHomeFeeds(){
this.showLoader = true;
this.VtkraHomeService
.getFeeds()
.subscribe(data => {
this.homefeed = data;
console.log(this.homefeed);
this.showLoader = false;
});
}
ngOnInit(){
this.getHomeFeeds()
}
}
My issue lies in the JSON response structure which looks something like this:
[
{
id: 15953,
date: '2016-10-22T07:55:34',
title: {
rendered: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum',
protected: false
},
content: {
rendered: '<p><img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" />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 ...
},
link: 'htts://www.w3schools.com/css/paris',
type: 'post',
author: 1
},
{
// More items...
}
];
I aim to extract the HTML and text separately from the "content (rendered)" field.
content: {
rendered: '<p><img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" />Lorem Ipsum is simply dummy text of the printing....
protected: false
},
The desired HTML format for displaying the content should look like this:
<md-list class="home-feed-list">
<div *ngFor="let item of homefeed">
<md-list-item routerLink="/Story">
<img md-list-avatar src="item.content.rendered(image url)" alt="" class="list-avatar">
<h4>{{item.title.rendered}}</h4>
<p>{{item.content.rendered(remaining text)}}</p>
</md-list-item>
<md-divider></md-divider>
</div>
</md-list>
If anyone can provide guidance on how to achieve this properly, I would greatly appreciate it as I am still learning about Angular 2 and Typescript.