Currently, I am invoking an http Get service method from a component to retrieve data and map it to a Person object. The goal is to display this information on the front end.
Below is my component code:
export class DisplayPersonComponent implements OnInit {
personId: number;
person: Person;
constructor(private route: ActivatedRoute, private service : PersonService) { }
ngOnInit() {
this.route.params.subscribe(params => {
this.personId = params['person-id']});
this.getPerson(this.personId);
}
getPerson(id: number)
{
this.service.getPerson(id).subscribe((data: Person) => { console.log(data);
this.person = data
});
}
}
And here is my service method:
getPerson(personId : number): Observable<Person> {
let urlParams = new HttpParams().set("personId", personId.toString());
return this.http.get<Person>(this.apiUrl, { params: urlParams})
.pipe(map((data: Person ) => { return data }),
catchError(error => { return throwError(' Something went wrong! ');
})
);
}
}
After inspecting the returned data object in the component, it appears to be in json format like { PersonID: 1, Name: 'Name'} etc. However, the issue lies in the fact that this.Person always remains undefined without any clear output or error explanation.
It is also important to note that I utilize the same objects for a POST method, which seamlessly maps from client to server without any specified mapping.