Why am I continuously receiving undefined error messages and how can I prevent them when attempting to read json data?
Currently, I am delving into Angular and embroiled in a project that involves externally sourced json. Here's a snippet of the json provided. The crucial data lies within the included array:
{jsonapi: {…}, data: {…}, included: Array(2), links: {…}}
jsonapi: {version: "1.0", meta: {…}}
data: {type: "node--quiz", id: "31f020f7-34d9-4b9a-bd2b-0d567eb285dc", attributes: {…}, links: {…}}
included: Array(2)
0: {type: "node--question", id: "afe7137a-2af1-4cb5-92da-879c495c0070", attributes: {…}, links: {…}}
1:
type: "node--question"
id: "79c06ac9-5995-409f-b84c-4d8a9711d0a9"
attributes: {title: "Question 1", body: {…}, field_options: "{
↵ "1":{
↵ "type":"select",
↵ "option… ],
↵ "answer":"methamphetamines"
↵ }
↵}", field_processed: "s:390:"<p>The genius chemist {"type":"select","opt…etamines"} in the Breaking Bad tv series.</p>
↵";"}
links: {self: {…}}
__proto__: Object
length: 2
__proto__: Array(0)
links: {self: {…}}
__proto__: Object
This is a sample of my app.component.html:
<mat-toolbar color="primary">
<mat-toolbar-row>
<span>{{ title }}</span>
</mat-toolbar-row>
</mat-toolbar>
<main>
<mat-card *ngFor="let question of questions.included">
<mat-card-header>
<mat-card-title> {{ question.attributes.title }} </mat-card-title>
</mat-card-header>
<mat-card-content>
{{ question.attributes.body.value }}
</mat-card-content>
<mat-card-actions>
TESTING: body content
</mat-card-actions>
</mat-card>
</main>
However, during execution of *ngFor, I encounter the following error in my browser console:
ERROR TypeError: Cannot read property 'included' of undefined