JSON data undefined while using in HTML


I am new to Angular and Node and have been working on a full stack development. I am reading the data on Angular from Node which I have connected to MySQL. I am somehow stuck at outputting my data on an HTML page. I am getting the error of undefined when I try to access my data in my HTML.

This is the JSON data that I have read on my console

This is my typescript code that converts JSON object to string:

private onFetchPosts()
  .get<{[key: string]: DataBase}>('http://localhost:3000/show')      //Here, DataBase is an interface
  .pipe(map(responseData => {
    const postsArray: DataBase[] = [];
    for (const key in responseData){
        postsArray.push({...responseData[key], idoffice: key});
    return postsArray;
  .subscribe(posts => {

    this.dbData = posts;                                           

When I try to access this data in my HTML code:

<h3>test print</h3>
<li class="list-group-item" *ngFor = "let db of dbData"></li>
<p>{{ db.ActivityType }}</p>

Then, I get this error:

ERROR TypeError: Cannot read property 'ActivityType' of undefined

Can you please help me out?


use db.ActivityType inside li .

<li class="list-group-item" *ngFor = "let db of dbData">
    <p>{{ db.ActivityType }}</p>

Answered By – Krishna Rathore

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.