I am a beginner in Angular and struggling to understand how async functions work. I have written the following code, but I am encountering an error:
GET https://localhost:44353/api/ecams/id/undefined 400["The value 'undefined' is not valid."]import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Exam } from '../_models/exam';
import { IndividualSession } from '../_models/individual-session';
import { IndividualSessionData } from '../_models/individual-session-data';
import { Session } from '../_models/session';
import { User } from '../_models/user';
import { AccountService } from '../_services/account.service';
import { ExamsService } from '../_services/exams.service';
import { IndividualSessionService } from '../_services/individual-session.service';
import { SessionService } from '../_services/session.service';
import { UsersService } from '../_services/users.service';
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
currentUser$: Observable<User>;
user: User;
userId: number;
individualSessionsData: IndividualSessionData[] = [];
tempIndividualSessionData: IndividualSessionData = {} as IndividualSessionData;
constructor(private accountService: AccountService,
private individualSessionService: IndividualSessionService,
private userService: UsersService,
private examService: ExamsService,
private sessionService: SessionService) {
this.tempIndividualSessionData.exam = {} as Exam;
this.tempIndividualSessionData.individualSession = new IndividualSession();
this.tempIndividualSessionData.session = {} as Session;
this.getCurrentUserData();
}
ngOnInit(): void {
}
onRowClick(){
}
logout() {
this.accountService.logout();
}
private getCurrentUserData() {
this.currentUser$ = this.accountService.currentUser$;
this.currentUser$.subscribe(user => {
if (!!user) {
this.user = user;
this.loadUser(this.user.email);
}
});
}
loadUser(email: string) {
this.userService.getUser(email).subscribe(user => {
if(!!user) {
this.user = user;
this.loadId(this.user.email);
}
})
}
loadId(email: string) {
this.userService.getId(email).subscribe(id => {
if(!!id) {
this.userId = id;
this.loadIndividualSessions(this.userId);
}
})
}
loadIndividualSessions(id: number) {
this.individualSessionService.getIndividualSessions(id).subscribe(sessions => {
if(!!sessions) {
sessions.forEach(session => {
this.tempIndividualSessionData.individualSession = session;
this.loadSession(session.sessionId);
});
}
})
}
loadSession(id: number) {
this.sessionService.getSession(id).subscribe(session => {
if(!!session) {
this.tempIndividualSessionData.session = session;
this.loadExam(session.examId);
}
})
}
loadExam(id: number) {
this.examService.getExamById(id).subscribe(exam => {
if(!!exam) {
this.tempIndividualSessionData.exam = exam;
this.individualSessionsData.push(this.tempIndividualSessionData);
}
})
}
}import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { Exam } from '../_models/exam';
import { Question } from '../_models/question';
@Injectable({
providedIn: 'root'
})
export class ExamsService {
baseUrl = environment.apiUrl;
currentExam: Exam;
answeredQuestions: Question[];
correctAnswers: number[];
currentMark: number;
constructor(private http: HttpClient) { }
getExams() {
return this.http.get<Exam[]>(this.baseUrl + 'exams');
}
getExam(title: string){
return this.http.get<Exam>(this.baseUrl + 'exams/title/' + title);
}
getExamById(id: number){
return this.http.get<Exam>(this.baseUrl + 'exams/id/' + id);
}
}If anyone can provide assistance, it would be greatly appreciated. Happy coding!