I'm making an app for a bootcamp where I call a third party API to get dog breeds, then I use 2 created apis to store users and the users favorites to 2 SQL database created with EF. I have an Angular front end that is where all of these will interact.
I'm trying to take a user object I've created out of a modal form and put it in one of my SQL databases using an api call from an API I've created expecting a user object.
In the dev tools I see it getting up to creating the link string, meaning the object is created, and all the paramaters have been added, but the API call doesn't happen and it doesnt post to the database.
Also if I copy and paste that linkstring into my API in postman it correctly adds the user to the database, but the API call just doesn't seem to want to post it to my database.
My relevant code is as follows. Any help is vastly appreciated
front end
user interface
export interface IUser{
Id?: number
firstName: string
lastName: string
email: string
password: string
}
api.service.ts
export class ApiService {
private breedUri = 'https://dog-breeds2.p.rapidapi.com/dog_breeds';
private userApi ='https://localhost:7078/api/Users';
private faveApi ='https://localhost:7078/api/FavoriteBreeds';
constructor(private http: HttpClient){}
addUser(newUser: IUser){
const linkString = (this.userApi+"/add?firstName="+newUser.firstName+"&lastName="+newUser.lastName+"&email="+newUser.email+"&password="+newUser.password)
console.log("user api link created",{linkString})
return this.http.post(this.userApi +"/add", newUser)
}
method in app.component.ts
constructor(private api: ApiService){}
addNewUser(){
this.addform = document.getElementById('loginForm');
const formData = new FormData(this.addform);
let newUser: IUser = {
firstName: formData.get("firstName") as string,
lastName: formData.get("lastName") as string,
email: formData.get("email") as string,
password: formData.get("psw") as string
};
console.log("user object being created check", {newUser})
this.api.addUser(newUser);
}
backend
[Route("api/[controller]")]
[ApiController]
public class UsersController : Controller
{
UsersRepository repo=new UsersRepository();
[HttpPost("add")]
public Users AddNewUser(Users newUser)
{
return repo.AddNewUser(newUser);
}
my devtools showing the link and created user object my swagger
From this line:
return this.http.post(this.userApi +"/add", newUser)
It returns an Observable. Observable is only triggered when it is subscribed. Thus, without subscribing, your Angular side didn't send the request to API. You can determine whether the request is sent by checking the browser DevTools --> Network tab and searching the request based on your API URL to be submitted.
You need to subscribe to the Observable and provide the observer to handle the returned Observable value (response) by scenario (success/error callback).
addNewUser(){
...
this.api.addUser(newUser).subscribe({
next: (response: any) {
// TO-DO: Handling when the response is succeed
},
error: (err: any) {
// TO-DO: Handling when the response is failed
},
complete: () {
// TO-DO: Handling when `next` and `error` callback is completed.
}
});
}
References: