Parsing JSON to display the data in angular - json

Question

So I have my data stored in database and I'm extracting in angular and I'm getting the data the problem is when I'm trying to display the data I'm getting the following error. I just need to display the question in html using ngFor* .I'm completely new to angular any guidance will be very helpful .
this.selfHelpService.getFgSelfHelpByName("BYOD").subscribe(data => {
// console.log(data);
const BYOD = JSON.parse(data["data"]);
// console.log(BYOD );
});
<div class="cards" *ngFor="let BYOD of BYOD">
<div class="read-1">
{{BYOD.posts.question}}
</div>
</div>

Answer 1

since you are getting the data, you can do the following:
// If this is your response:
{"BYOD":[ ` { "posts": [ {"Question":"BYOD (Android)","answer":"???"}, {"Question":"BYOD (IOS)","answer":"?????"} ] } ] };
this.selfHelpService.getFgSelfHelpByName("BYOD").subscribe(data => {
try {
const BYOD = JSON.parse(JSON.stringify(data["data"]));
} catch(err) {
console.log('Try catch error ==>', err);
}
// Declare a variable in the component.ts above constructor called byodPostsData
// Assign the values to that variable
this.byodPostsData = BYOD[0].posts;
});
// In your HTML now, simply loop through the this.byodPostsData;
<div class="cards" *ngFor="let eachPost of byodPostsData">
<div class="read-1" *ngIf="eachPost && eachPost.question">
{{ eachPost.question }}
</div>
</div>

Answer 2

As mentioned earlier by other commentators here: Am not sure why you are using JSON.parse(). But if you should use it for sure, then try using this:
// Generally its considered good practice to use try-catch for JSON.parse() for data
try {
const BYOD = JSON.parse(JSON.stringify(data["data"]));
} catch(err) {
console.log('Try catch error ==>', err);
}

Answer 3

I am not sure what you are trying to loop, but, if you want to loop over byod,
<div class="cards" *ngFor="let byod of byod.BYOD[0].posts">
<div class="read-1">
{{byod.Question}}
</div>
</div>
Besides in your example code, byod is locally scope in the function, you should make a component variable from that to make it accessable by the HTML.
Feel free to ask if something is unclear.
As you are new to Angular: this is how decided to access the response:
The 0 should come from the fact that the response is a JSON object with a JSON key BYOD which has an array as value: so the BYOD[0] indicates that you are trying to access the first item of the array from BYOD, which is another object with the JSON key "posts", the value of "posts" is an array you want to loop over. If you parse the data from the request to a component property called byot, it should be accessable in the html the following: byod.BYOD[0].posts I hope I made it a bit more clear.
Here is a stackblitz!
https://stackblitz.com/edit/angular-ivy-jcxgfo?file=src/app/app.component.ts