Hey there, I'm completely new to dealing with HTTP and fetching data from the server. I've been scouring through various tutorials, examples, and questions on different platforms, but unfortunately, I haven't been able to find exactly what I'm looking for. Most of the tutorials I came across only demonstrate how to retrieve and add data.
Based on those examples, I was able to successfully retrieve data:
Service:
getCases(){
return this.http.get('someUrl');
}
Case component constructor:
this._service.getCases()
.map((res: Response) => res.json())
.subscribe(cases => this.cases = cases);
Adding cases:
Service:
public saveCase(case: case) {
let body = JSON.stringify(case);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post('someUrl', body, options)
.map(this.extractData)
.catch(this.handleError)
.subscribe(case => this.cases.push(case));
}
Case Component:
saveCase() {
let case = new Case(this.id, this.name, this.date)
this._service.saveCase(case);
this.name = '';
}
Although I've managed to retrieve data successfully and add new cases, I'm facing a challenge in getting the Array to update automatically when a new case is added. At the moment, the new case only shows up after a browser refresh.
My second issue involves allowing users to click on a case, which then routes them to a detailed page where they can add steps and feedback. The case object includes attributes like id, name, date, and an array of steps (currently empty). Each step object has an array of feedback, with each feedback object having two string attributes. When I try to click on a case, the case name doesn't get displayed on the detail page, and the button for adding steps doesn't seem to work. Prior to integrating HTTP into my code, everything was functioning as expected. The methods I'm using probably need some adjustments, but I'm unsure about what needs to be done. Here are the methods that might require attention:
Case Component:
gotoDetail(case: Case) {
this._router.navigate(['CaseDetail', {"id": case.name}]);
}
Service:
public getById(id: string): Case {
for (let case of this.cases) {
if (case.id === id) {
return case;
}
}
return null;
}
Another issue is regarding the syntax for removing cases. I've tried several examples, including those suggested in the links provided by @shershen, but none seem to work for me. The original methods I have need to be adjusted to interact with HTTP:
Component:
removeSearchCase(case: Case) {
this._service.removeCase(case);
}
Service:
public removeCase(value: Case): void {
let index = this.cases.indexOf(value);
this.cases.splice(index, 1);
}
Thus, the case removal process involves a post request.
Lastly, in terms of the backend setup, I only have three endpoints: getCases (GET), saveCase (also functions as updating a case) (POST), and removeCase (POST).