Hey there, I am encountering an issue with fetching the Qid from the server side. Interestingly enough, it works perfectly fine in Postman but not in Angular. The problem seems to be isolated to the Quiz ID retrieval, as other IDs like Category ID and Question ID are retrieved 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 https://i.sstatic.net/J8njM.png
The issue here is that the ID is being fetched as undefined, even though the retrieval process seems correct. Any assistance in resolving this problem would be greatly appreciated. https://i.sstatic.net/v84zD.png https://i.sstatic.net/iuLi8.png