Hey there, I'm diving into Angular and trying my hand at a REST API for the first time, so bear with me if something slips past me.
In this scenario, I have a Period object in Typescript and in C#, here they are:
Period TS:
export class Period {
id: number;
year: string;
month: string;
blocked: boolean;
constructor(id: number, year: string, month: string, blocked: boolean) {
this.id = id;
this.year = year;
this.month = month;
this.blocked = blocked;
}
}
Period C#:
public class Period
{
[JsonProperty(PropertyName = "id")]
public int ID { get; set; }
[JsonProperty(PropertyName = "year")]
public string Year { get; set; }
[JsonProperty(PropertyName = "month")]
public string Month { get; set; }
[JsonProperty(PropertyName = "blocked")]
public bool Blocked { get; set; }
public Period() { }
}
Up to now, I've been able to fetch data from my database using Postman.
Postman: GET ->
https://localhost:5001/api/period/GetAllPeriods[
{
"id": 122,
"year": "2019",
"month": "03",
"blocked": false
},
{
"id": 121,
"year": "2019",
"month": "02",
"blocked": false
}, ...
]
https://i.sstatic.net/kCw29.png
After some digging and testing, I've got the code below working. I retrieve my JSON data which I convert into Period objects in Typescript. Then, I display them on my page and everything's hunky-dory.
However, the Angular documentation states that Http is outdated and HttpClient should be used instead.
period.service.ts: Http
export class PeriodService {
constructor(private http: Http) { }
//Http
getPeriods(): Observable<Period[]> {
return this.http.get('/api/period/GetAllPeriods')
.pipe(
catchError(this.handleError),
map(response => {
const periods = response.json();
return periods.map((period) => new Period(period.id, period.year, period.month, period.blocked));
})
);
}
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
console.error('An error occurred:', error.error.message);
} else {
console.error(
`Backend returned code ${error.status}, ` +
`body was: ${error.error}`);
console.error(error);
}
return throwError(
'Something bad happened; please try again later.');
};
}
I attempted to make use of HttpClient but encountered issues retrieving data in my service.
period.service.ts: HttpClient
export class PeriodService {
constructor(private http: HttpClient) { }
//HttpClient
getPeriods(): Observable<Period[]> {
return this.http.get<Period[]>('https://localhost:5001/api/period/GetAllPeriods')
.pipe(
catchError(this.handleError)
);
}
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
console.error('An error occurred:', error.error.message);
} else {
console.error(
`Backend returned code ${error.status}, ` +
`body was: ${error.error}`);
console.error(error);
}
return throwError(
'Something bad happened; please try again later.');
};
}
https://i.sstatic.net/FeFPs.png
To clarify, while I can fetch JSON data from the API, when utilizing the HttpClient service, an error surfaces in the browser console indicating it's unable to locate the accessible data. It seems like the issue lies somewhere within the HttpClient service.
If you have any insights, I'd greatly appreciate it. Thanks in advance.