Utilizing HttpClient in Angular, I am retrieving data and using an interface to map the nested JSON response, but encountering missing values in one of the nested arrays.
Component:
export class PlansDetailComponent implements OnInit {
exerciseForm: FormGroup = new FormGroup({})
planId? : number;
plan? : Plan;
constructor(private route: ActivatedRoute, private http: HttpClient, private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.route.paramMap.subscribe(params => {
this.planId = Number(params.get('id'));
});
this.http.get<GetPlanQueryResult>('https://localhost:7186/plans/'+this.planId).subscribe({
next: response => {
this.plan = response.plan
console.log(this.plan.exercises[0].records);
this.initializeForm();
},
error: (err) => {
console.error(err);
}
})
}
Interfaces created for mapping data:
import {Plan} from "./plan";
export interface GetPlanQueryResult {
plan: Plan;
}
import {Exercise} from "./exercise";
export interface Plan {
id: number;
archived: boolean;
name: string;
exercises: Exercise[];
}
import {Record} from "./record";
export interface Exercise {
id: number;
name: string;
description: string;
records: Record[];
}
export interface Record {
weight: number;
repetitions: number;
date : string;
}
A sample JSON response obtained from Postman:
{
"plan": {
"id": 1023,
"archived": false,
"name": "testssss",
"exercises": [
{
"id": 1044,
"name": "klata",
"description": "",
"records": [
{
"weight": 2,
"repetitions": 0,
"date": "2024-07-09T00:00:00"
},
{
"weight": 2,
"repetitions": 0,
"date": "2024-07-09T00:00:00"
}
]
},
{
"id": 1045,
"name": "klata",
"description": "",
"records": [
{
"weight": 3,
"repetitions": 0,
"date": "2024-07-09T00:00:00"
},
{
"weight": 3,
"repetitions": 0,
"date": "2024-07-09T00:00:00"
}
]
}
]
}
}
The API returns records, but after mapping, the records array appears empty.