I am attempting to transition from a list of users to displaying the profile of a single user on a separate page.
My goal is to achieve this using routerLink and passing the specific user's id to the next page.
Although the routing is functioning correctly as I am directed to the profile page, the issue arises when I log the results of the http request. Instead of receiving the details of one user, I still get back the entire list of users similar to the users page.
I have experimented with various solutions such as modifying the url path in my user.service.ts file, but it did not resolve the problem. In fact, I encountered 404 request errors when using the path ${this.url}/users/${id}/ instead of ${this.url}/users/?i=${id}/ which was working.
The API documentation suggests that in order to retrieve a single user, the format should be http://1234//users/{id}/, where id is an integer. However, when attempting to implement this format, the 404 error persisted.
Thus, I resorted to using the ?i= version, but the drawback is that only the full list of users is displayed on the next page.
MY CODE:
user.service.ts
// Obtain a user's profile
getUserDetails(id): Observable<any> {
return this.http.get(`${this.url}/users/?i=${id}/`); // why add ?i
}
user.page.ts
// Retrieve all users in the users page
getAllUsers() {
this.userList = this.userService.getList()
.pipe(map(response => response.results));
}
user.page.html
<ion-avatar class="user-image" slot="start" [routerLink]="['/','profile', 'user.id']">
<ion-img src="assets/22.jpeg"> </ion-img>
</ion-avatar>
profile.page.ts
information = null;
...
ngOnInit() {
// Extract the ID passed via URL
let id = this.activatedRoute.snapshot.paramMap.get('id');
// Fetch the information from the API
this.userService.getUserDetails(id).subscribe(result => {
this.information = result;
console.log(result);
});
}