How to print json array in angular - html

Question

Here Stackblitz https://stackblitz.com/edit/angular-parse-object
Response format from REST API is
[{"id":123,"name":Test,"value":{"pass": true, "verified": true}}, {"id":435,"name":Test12,"value":{"pass": false, "verified": true}},]
<div *ngFor="let record of student.value">
<ul *ngFor="let key of objectKeys(record)">
<li>{{key}} :: {{record[key]}}</li>
</ul>
</div>
Getting error ** Cannot read property 'value' of undefined **
<div *ngFor="let rec of student">
<h2>{{rec.id}}</h2>
<div *ngFor="let result of rec.value">
<h4> {{value.pass}} </h4>
</div>
</div>
getting Error object of type 'string'. NgFor only supports binding to Iterables such as Arrays.
How to fix it?
I expect the output as
ID : 123 Name : Test Pass : true [yes] verified : true

Answer 1

I just write a basic ngFor code using your Student Array. Try this I hope it'll help you out. Thanks
HTML
<div class="studentList" *ngFor="let student of students">
<ul>
<li>ID : {{student.id}}</li>
<li>Name : {{student.name}}</li>
<li>Pass : {{student.value.pass}} [{{student.value.pass ? 'Yes' : 'No'}}]</li>
<li>Verified : {{student.value.verified}}</li>
</ul>
</div>
TS
students = [
{
"id":123,
"name":"Test",
"value":{"pass": true, "verified": true}
}, {
"id":435,
"name":"Test12",
"value":{"pass": false, "verified": true}
}
]
CSS
.studentList ul {
list-style: none;
margin: 0 0 10px;
padding: 0;
}
.studentList ul li {
display: inline-block;
margin-right: 10px;
}

Answer 2

You only need 1 ngFor, your value is not array.
<div *ngFor="let rec of student">
<h2>Id: {{rec.id}} Name: {{rec.name}} Pass: {{rec.value.pass}} Verified: {{rec.value.verified}}</h2>
</div>
Reference (you can format it)
https://stackblitz.com/edit/angular-iterator
Updated:
Change your map function with JSON.parse like this
this.student = ["{pass: true, verified: true}", "{pass: false, verified: true}"];
this.student = this.student.map(c=>JSON.parse(c.replace(/([a-zA-Z0-9-]+): ([a-zA-Z0-9-]+)/g, "\"$1\":\"$2\"")));
https://stackblitz.com/edit/angular-parse-object