Angular Http get method difference between getById and getByName - json

Question

I am learning the basics of Angular and am currently working on making a REST service using the HttpClient from #angular/common/http.
In many tutorials the first step is making a http.get() call. Usually first the whole list following a http.get() call focused on retrieving only one element. In my example, I have a userList (with users). I have made two methods: getUserById() and getUserByName(). ${this.userUrl} refers to the location of the database (using a JSON file) Below they are displayed:
constructor(private http: HttpClient) {
}
getUserById(id: number): Observable<IUser> {
return this.http.get<IUser>(`${this.userUrl}/${id}`);
}
getUserByName(name: string): Observable<IUser> {
return this.http.get<IUser>(`${this.userUrl}/?name=${name}`);
}
Initially I tried to make the getUserByName() method work via the same way the getUserById(). Thus using:
getUserByName(name: string): Observable<IUser> {
return this.http.get<IUser>(`${this.userUrl}/${name}`);
}
This didn't work and I received the error statement 404 file not found. This is the json file that I worked with (I have set up a json server so that I could also perform http.delete() methods and so on):
{"users": [
{
"id": 1,
"name": "James",
"lastName": "Jameson",
"dateOfBirth": "10-10-2000",
"occupation": "Student"
},
{
"id": 3,
"name": "Steven",
"lastName": "Stevenson",
"dateOfBirth": "10-10-1990",
"occupation": "Police officer"
}]}
Can anyone explain me why the getUserById methods works using just '/${id}' in the url call and why the getUserByName needs to use '?/name=${name}'?

Answer 1

if you use:
getUserById(id: number): Observable<IUser> {
return this.http.get<IUser>(`${this.userUrl}/${id}`);
}
getUserByName(name: string): Observable<IUser> {
return this.http.get<IUser>(`${this.userUrl}/${name}`);
}
and call for exemple /user3262578, it will enter to the first endpoint method which is getUserById(id), you're clearly have ambiguity here. the both methode have the same endpoints.
try to change the second endpoint (getUserByName) to other link like:
return this.http.get<IUser>(`${this.userUrl}/search/${name}`);

Answer 2

This is nothing to do with Angular, this is purely a backend endpoint issue.
Test requests to your backend using an HTTP Rest Client such as PostMan.
Once everything is working at the backend as expected, then integrate with Angular.