Not able to access json Object key - json

Question

I have a json object as below:
Json
{error: false, message: [,…]}
Inside message:
{convid: "5aeab8a0e5dd7c55942a7ce7", recipient: "Akhil Sindhwani", seen: false, from: "Miti Desai",…}
convid : "5aeab8a0e5dd7c55942a7ce7" from : "Miti Desai" messages :
"asdsad" recipient : "Akhil Sindhwani" seen : false subject : "sasas"
updatedAt : "2018-05-03T07:22:09.367Z"
I am working in Angular and above is the response I get from http service.
Service function:
getUserMessages() {
console.log("getUserMessages");
this._mailingService.getMessages()
.subscribe(conversations => {
this.messageData = conversations
if (conversations) {
console.log( this.messageData);
this.messageData = conversations
}
})
, error => {
console.log("Error");
},
() => {
// THIS IS EXECUTED AFTER THE SUBSCRIBE COMPLETES
console.log( 'this.messageData');
console.log( this.messageData);
}
}
In code above I get a response in conversation which I get that json object.
I put that object in message data.
In html I tried to parse message data as follow:
<div id="messageMenu">
<ul>
<li class='msgBody' *ngFor = "let message of messageData.message">
<div class="msgListingContainer1">
<div class="senderImg">
<img src="../../../../assets/images/profile1.jpg">
</div>
</div>
<div style=" display:inline-block" class="msgListingContainer2">
<span style=" display:inline-block" class="senderName">{{message.recipients}}</span>
<span class="msgTimestamp">5:13pm</span>
<p class="msgheading"><span>Hey alex pretty cool new track you got..</span></p>
</div>
</li>
</ul>
</div>
But I get this error message:
MessageMenuComponent.html:6 ERROR TypeError: Cannot read property
'message' of undefined
I am trying to fetch a key from json and then loop it using ngFor directive it. It is simple, I have done this before.
Can anyone tell me what I am doing wrong?
Any help would be appreciated!
Update
Not sure how it worked.
Didn't change anything in component file.
Changed html to:
<div id="messageMenu">
<ng-container *ngIf="showConversations;else noCnvrstns" >
<ul>
<li class='msgBody' *ngFor = "let message of messageData">
<div class="msgListingContainer1">
<div class="senderImg">
<img src="../../../../assets/images/profile2.jpg">
</div>
</div>
<div style=" display:inline-block" class="msgListingContainer2">
<span style=" display:inline-block" class="senderName">{{message.recipient}}</span>
<span class="msgTimestamp">{{ message.updatedAt | date:'hh:mm a' }}</span>
<p class="msgheading">{{message.messages}}</p>
</div>
</li>
</ul>
</ng-container>
<ng-template #noCnvrstns>
<div class="noConversations">No conversations to show</div>
</ng-template>
</div>
Started getting response.
I didn't understand when messages were in message key of json object then how I able to fetch them out of conversations directly but working for me.
Not adding answer as question itself is ambiguous.
Thanks for help!

Answer 1

Better to use safe navigation ? in case of asnyc calls fetching data. it will not alow angular to throw an error.
Try this -
<li class='msgBody' *ngFor = "let message of messageData?.message">
Also at the time of declaration typecaste messageData: any.

Answer 2

Your JSON file is malformed.
How you can read here:
In JSON, keys must be strings, written with double quotes
Insert double quotes around your keys, this will probably fix the problem.