The quiz Id is not getting fetched in Angular

Hi I am trying to fetch Qid from Server side and in postman it is working fine but in angular not coming properly The problem is only appearing when trying to fetch Quiz Id others like category ID and Question ID is coming up correctly.

ViewQuizzesComponent

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import {  MatCardModule } from '@angular/material/card';
import { RouterLink } from '@angular/router';
import Swal from 'sweetalert2';
import { QuizService } from '../../../services/quiz.service';


interface Quiz {
  qId: number;
  title: string;
  description: string;
  maxMarks: number;
  numberOfQuestions: number;
  active: boolean;
  category: {
    cid: number;
    title: string;
    
  };}

@Component({
  selector: 'app-view-quizzes',
  standalone: true,
  imports: [CommonModule,
    MatCardModule,
    MatButtonModule,
    RouterLink,],
  templateUrl: './view-quizzes.component.html',
  styleUrl: './view-quizzes.component.css'
})
export class ViewQuizzesComponent {
  quizzes: Quiz[] = [];

  constructor(private _quiz: QuizService) {}

  ngOnInit(): void {
    this._quiz.quizzes().subscribe(
      (data: any) => {
        this.quizzes = data;
        console.log(this.quizzes);
      },
      (error) => {
        console.log(error);
        Swal.fire('Error !', 'Error in loading data !', 'error');
      }
    );
  }

  //
  deleteQuiz(qId: number) {
    console.log('Deleting quiz with ID:', qId);
    Swal.fire({
      icon: 'info',
      title: 'Are you sure ?',
      confirmButtonText: 'Delete',
      showCancelButton: true,
    }).then((result) => {
      if (result.isConfirmed) {
        //delete...

        this._quiz.deleteQuiz(qId).subscribe(
          (data) => {
            this.quizzes = this.quizzes.filter((quiz) => quiz.qId !== qId);
            Swal.fire('Success', 'Quiz deleted ', 'success');
          },
          (error) => {
            Swal.fire('Error', 'Error in deleting quiz', 'error');
          }
        );
      }
    });
  }
}

ViewQuizzesComponent HTML

<mat-card class="mt10 mr20 ml20" *ngFor="let q of quizzes">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>
      {{ q.title }}
    </mat-card-title>
    <mat-card-subtitle>
      {{ q.category.title }}
    </mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p>{{ q.description }}</p>
  </mat-card-content>
  <mat-card-actions>
    <button
      [routerLink]="'/admin/view-questions/' + q.qId + '/' + q.title"
      mat-flat-button
      color="accent"
    >
      Questions
    </button>
    <button mat-stroked-button color="accent" class="ml20">
      Max Marks: {{ q.maxMarks }}
    </button>
    <button mat-stroked-button color="accent" class="ml20">
      Questions: {{ q.numberOfQuestions }}
    </button>
    <button
      [routerLink]="'/admin/quiz/' + q.qId"
      mat-flat-button
      color="accent"
      class="ml20"
    >
      Update
    </button>
    <button mat-flat-button color="accent" class="ml20">Attempts</button>

    <button
      mat-flat-button
      color="warn"
      class="ml10"
      (click)="deleteQuiz(q.qId)"
    >
      Delete
    </button>
  </mat-card-actions>
</mat-card>

<div class="container text-center mt20">
  <button routerLink="/admin/add-quiz" mat-raised-button color="accent">
    Add New Quiz
  </button>
</div>

Quiz Service

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import baseUrl from './helper';

@Injectable({
  providedIn: 'root',
})
export class QuizService {
  constructor(private http: HttpClient) {}

  public quizzes() {
    return this.http.get(`${baseUrl}/quiz/`);
  }

  //add quiz
  public addQuiz(quiz: any) {
    return this.http.post(`${baseUrl}/quiz/`, quiz);
  }

  //delete quiz
  public deleteQuiz(qId: number) {
    return this.http.delete(`${baseUrl}/quiz/${qId}`);
  }

  //get the single quiz

  public getQuiz(qId: number) {
    return this.http.get(`${baseUrl}/quiz/${qId}`);
  }

  //update quiz
  public updateQuiz(quiz: any) {
    return this.http.put(`${baseUrl}/quiz/`, quiz);
  }

  //get quizzes of category
  public getQuizzesOfCategory(cid: number) {
    return this.http.get(`${baseUrl}/quiz/category/${cid}`);
  }
  //qet active quizzes
  public getActiveQuizzes() {
    return this.http.get(`${baseUrl}/quiz/active`);
  }

  //get active quizzes of category
  public getActiveQuizzesOfCategory(cid: number) {
    return this.http.get(`${baseUrl}/quiz/active/${cid}`);
  }
}

SpringBoot API

This the issue Id is being fetched as undefined even though I guess it is being fetched properly. Please help in solving this issue.

In JavaScript, undefined means that the property doesn't exist on the object. When receiving responses from an API, you need your JS object to include all the public members of the API Response object.

Some basic things to verify:

• Does the expected property exist on the API Response object?
  • Is the property public? If not, the serializer won't include it.
• Is there a typo on either the JS or the API Response object property?
  • Check the casing settings of the serializer. Property names are case-sensitive.

If possible, consider using automated code generation tools to create JS models to match the API Response object.