I'm having some trouble with interpolation. I am utilizing http.get to retrieve data for my service.
Here is the code for my post.service :
getPosts() {return this._http.get(this._Url + 'events').map((_response: Response) => {
const data = _response.json()
return _response.json();
});
In my component, I execute the following code to pass the response to the res array:
getdata(){this._postService.getPosts()
.subscribe(
posts => {
posts.forEach(posts => {
this.res.push(
new event(
posts.field_event_title[0].value,
posts.field_event_price[0].value,
"test loc"
)
)
});
}
,
(error) => console.log(error, "error from observable")
);
console.log(this.res, "res after subs")
}
Html Code:
<div class="row" *ngFor="let post of res">
Title: {{post.title}} <br>
Price: {{post.price}} <br>
Location:{{post.location}}
</div>
My problem is that using *ngFor displays all my data, but I only want to display one post e.g. res[0].title. When I try to use {{ res[0].title }} in the html, I get the error "Cannot read property 'title' of undefined". Can anyone offer assistance on this issue? Ultimately, I would like to utilize the array res to show data in the DOM.