After creating a method called getFooterContent to retrieve data and display it using the method, I encountered the following error:
platform-browser.umd.js:1900
ERROR: TypeError: Cannot read property 'content' of undefined
getFooterContent(){
return this.homepageService
.getFooter()
.then(content => this.footerContent = content)
.catch(error => this.error = error);
}
ngOnInit(){
this.getFooterContent();
console.log(this.footerContent);
}
Here is my corresponding HTML code:
<footer class="c-footer">
<div class="c-footer--service">
<span>{{ footerContent[0].content}}</span>
<span>{{ footerContent[1] }}</span>
</div>
<h1>{{ footerContent[2] }}</h1>
<div class="c-footer__version">
<p>{{ footerContent[3] }}</p>
<p>{{ footerContent[4] }}</p>
</div>
this.footerContent initially displays []
and then displays
[Object, Object, Object, Object, Object]
0:Object content:"253548" desc:"service_tel"
However, the issue remains unresolved as to why footerContent[0].content is returning undefined.