Angular property 'length' of undefined

Question

I am trying to get detail of opened route (id based) but it returns

ERROR TypeError: Cannot read property 'length' of undefined

and

ERROR TypeError: Cannot read property 'notes' of undefined

Code

Service

getGroupsDetails(id) {
    const httpOptions = {
      headers: new HttpHeaders({
        Accept: 'application/json, text/plain',
        'Content-Type': 'application/json',
        Authorization : this.token,
      })
    };
    return this.http.get(`${this.env.GROUPS}/${id}`, httpOptions).pipe(
      map(groups => groups)
    );
  }

Component

messages: any;
loading: any;

ngOnInit() {
 this.getData();
}

async getData() {
    this.loading = await this.loadingController.create({
        message: 'Please wait...',
        spinner: 'crescent',
        duration: 2000
    });

    await this.loading.present();

    const id = this.activatedRoute.snapshot.paramMap.get('id');
    this.groupsService.getGroupsDetails(id).subscribe(res => {
        console.log('res', res);
        this.messages = res;
        this.hideLoading();
    });
    }

    private hideLoading() {
    this.loading.dismiss();
}

html file

<div *ngFor="let message of messages.notes">
  <p>{{message.note}} <br> {{message.user.name}} </p>
</div>

Sample data (by postman)

{
    "data": {
        "id": 1,
        "name": "Default Group",
        "photo": null,
        "description": "First group for testing purpose only.",
        "created_at": "10-05-2020 | 04:05:15 AM",
        "users": [
            {
                "id": 1,
                "name": "Sam",
                "username": "admin",
                "phone": "0812100000000",
                "photo": null,
                "email": "admin@admin.com",
                "created_at": "10-05-2020 | 04:05:15 AM"
            },
            {
                "id": 2,
                "name": "Rudy",
                "username": "rudy",
                "phone": "0812100000001",
                "photo": null,
                "email": "rudy@admin.com",
                "created_at": "10-05-2020 | 04:05:15 AM"
            },
            {
                "id": 3,
                "name": "Putri",
                "username": "putri",
                "phone": "08121000000002",
                "photo": null,
                "email": "putri@admin.com",
                "created_at": "10-05-2020 | 04:05:15 AM"
            }
        ],
        "admins": [
            {
                "id": 1,
                "name": "Sam",
                "username": "admin",
                "phone": "0812100000000",
                "photo": null,
                "email": "admin@admin.com",
                "created_at": "10-05-2020 | 04:05:15 AM"
            },
            {
                "id": 2,
                "name": "Rudy",
                "username": "rudy",
                "phone": "0812100000001",
                "photo": null,
                "email": "rudy@admin.com",
                "created_at": "10-05-2020 | 04:05:15 AM"
            }
        ],
        "notes": [ // messages to be loop in html
            {
                "id": 7,
                "note": "hello world",
                "user": {
                    "id": 1,
                    "name": "Sam",
                    "username": "admin",
                    "phone": "0812100000000",
                    "photo": null,
                    "email": "admin@admin.com",
                    "created_at": "10-05-2020 | 04:05:15 AM"
                },
                "created_at": "18-05-2020 | 08:05:27 AM"
            },
            {
                "id": 8,
                "note": "hello world",
                "user": {
                    "id": 1,
                    "name": "Sam",
                    "username": "admin",
                    "phone": "0812100000000",
                    "photo": null,
                    "email": "admin@admin.com",
                    "created_at": "10-05-2020 | 04:05:15 AM"
                },
                "created_at": "18-05-2020 | 08:05:08 AM"
            },
            {
                "id": 9,
                "note": "hello world",
                "user": {
                    "id": 1,
                    "name": "Sam",
                    "username": "admin",
                    "phone": "0812100000000",
                    "photo": null,
                    "email": "admin@admin.com",
                    "created_at": "10-05-2020 | 04:05:15 AM"
                },
                "created_at": "18-05-2020 | 08:05:19 AM"
            }
        ]
    },
    "message": "Groups retrieved successfully."
}

Note: When I open url I cannot see any request being sent to server in network tab, nor getting results of console.log('res', res); in console tab. not sure if that's important or not but good to share :)

Any idea?

Update

Based on elclanrs comment I've changed my html code like:

<div *ngIf="messages">
  <div *ngFor="let message of messages.notes">
    <p>{{message.note}} <br> {{message.user.name}} </p>
  </div>
</div>

Result

ERROR TypeError: Cannot read property 'length' of undefined is gone but still have this error remained ERROR TypeError: Cannot read property 'notes' of undefined and nothing printed in html file yet.

Answer 1

<ng-container *ngIf="messages && messages.notes">
    <div *ngFor="let message of messages.notes">
        <p>{{message.note}} <br> {{message.user.name}} </p>
    </div>
</ng-container>