How can I loop through my records from MongoDB and display to a page?

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