I’m trying to loop through security questions and display the question text. Currently, they are displaying like this on the screen, however I only need the text of the question
{ "_id": "61a1569acfc17020c4d67a28", "securityQuestions": [ { "_id": "61a40df8703c7292e09376b3", "text": "What city were you born in?", "answer": "Peoria", "isDisabled": false }, { "_id": "61a40e02703c7292e09376b4", "text": "What is your favorite pets name?", "answer": "Rocky", "isDisabled": false } ] }
Here’s where I’m looping through in my html file
<ng-container *ngFor="let question of questions; index as i">
<div class="security-questions" fxLayout="row" fxLayoutGap="60%">
<div class="icons">
<h3>{{ question | json }}</h3>
</div>
here is my TS file
imports...
export class SecurityQuestionsComponent implements OnInit {
questions: SecurityQuestion[];
user: User;
constructor(public dialog: MatDialog, private http: HttpClient) {}
ngOnInit(): void {
this.fetchQuestions();
}
//Task dialog to open when user hits button
openCreateQuestionDialog(): void {
const dialogRef = this.dialog.open(CreateQuestionDialogComponent, {
width: '250px',
data: {
question: {
text: '',
answer: '',
},
},
});
dialogRef.afterClosed().subscribe((result) => {
this.questions.push(result);
});
}
fetchQuestions(): void {
this.http
.get('/api/security-questions')
.subscribe((res: SecurityQuestion[]) => {
this.questions = res;
});
}
deleteQuestion(i: number) {
const question: SecurityQuestion = this.questions[i];
this.http
.delete(`/api/security-questions/${question._id}`)
.subscribe(() => {
this.questions.splice(i, 1);
});
}
updateQuestion(question: SecurityQuestion): void {
const dialogRef = this.dialog.open(CreateQuestionDialogComponent, {
width: '250px',
data: {
question: question,
newQuestion: false,
},
});
}
}
my interface for security question
import { User } from "./user.interface";
export interface SecurityQuestion {
_id: any;
text: string,
answer: string,
isDisabled: boolean
}
this is what a record in my db looks like db record
