JSON data undefined while using in HTML

Question

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()
{
  this.http
  .get<{[key: string]: DataBase}>('http://localhost:3000/show')      //Here, DataBase is an interface
  .pipe(map(responseData => {
    const postsArray: DataBase[] = [];
    for (const key in responseData){
      if(responseData.hasOwnProperty(key)){
        postsArray.push({...responseData[key], idoffice: key});
      }
    }
    return postsArray;
  }))
  .subscribe(posts => {

    this.dbData = posts;                                           
    console.log(this.dbData);
  });
}

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?

Answer 1

use db.ActivityType inside li .

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

Answer 2

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

li tag closed wrongly.