Ufdjrw

In my Angular application I am getting data from an api using a get request in a service I have created, I am trying to create a post request to that api also, my code does not seem to work. my code so far is:

 import Injectable from '@angular/core';
 import HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse, HttpErrorResponse from '@angular/common/http';
 import HttpClientModule from '@angular/common/http';
 import Observable, of, throwError from 'rxjs';
 import catchError, retry from 'rxjs/operators';


 @Injectable(
 providedIn: 'root'
 )
 export class 

nowService 

 serviceApiUrl: string = 'api/incident';


 constructor(
 private http: HttpClient,

 ) 

 getAll(): Observable<any> 
 return this.http.get<any>(this.serviceApiUrl)
 .pipe(
 catchError(this.handleError)
 );
 

 getIncidents(customerId): Observable<any> 
 return this.http.get<any>(this.serviceApiUrl + "?customer_id=" + customerId )
 .pipe(
 catchError(this.handleError)
 );
 

 postIncidents(customerId): Observable<any> 
 return this.http.post<any>(this.serviceApiUrl + "?customer_id=" + customerId )
 .pipe(
 catchError(this.handleError)
 );
 


 private handleError(error: HttpErrorResponse) 
 if (error.error instanceof ErrorEvent) 
 console.log(error.error.message)

 else 
 console.log(error.status)
 
 return throwError(
 console.log('Something has happened; Api is not working!'));
 ;

It takes the customer_id as a parameter. The error I am getting is:

Expected 2-3 arguments, but got 1.

POST request are used when you want to insert something into database. HttpClient post function expects at least 2 arguments. First one is URL and the second one is request body (object you want to insert into DB).

For example if you want to create a user, this is the standard way

this.httpClient.post<any>('/api/user', username: 'test', password: '123');

This will return Observable of the response body (which is probably the same object you passed as second argument with id). If you want the function to return entire response (with status and other useful data), you can pass it third argument (options)

this.httpClient.post<any>('/api/user', ..., observe: 'response');

This will return Observable which will emit something like this when it completes:

 body: 
 id: 1,
 username: 'test',
 password: '123'
 ,
 status: 201 // Indicates the creation was successful (sometimes 200),
 headers: ... // you can pass them as property of 3rd argument

Since your endpoint doesn't expect the request to have a body, you can do it like this:

postIncidents(customerId): Observable<any> 
 return this.http.post<any>(this.serviceApiUrl+"?customer_id="+customerId, null)
 .pipe(catchError(this.handleError));
 

sending data to the server: https://angular.io/guide/http#sending-data-to-the-server

more about http status codes: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

You are missing the body, try adding an empty object

return this.http.post<any>(this.serviceApiUrl + "?customer_id=" + customerId, )
 .pipe(
 catchError(this.handleError)
 );

The problem came from the POST method:

 return this.http.post<any>(url, body, headers)

However, according to the Angular version that you're working at it may be different.

Angular Docs

By convention, Http POST requests are expected to contain data in the request body. Essentially you're telling the server to create a resource. In order to do that, you put the resource (an incident in your case) in the request body of the POST request.

To do this in angular, you pass it as the second parameter.

postIncidents(customerId, incident): Observable<any> 
 const url = this.serviceApiUrl + "?customer_id=" + customerId;
 return this.http.post<any>(url, incident)
 .pipe(
 catchError(this.handleError)
 );

And as a general practice, I try to keep the URL as clean as possible with post requests and save the query string parameters for when I'm fetching data. What would be cleanest would be to ensure that customerId is a property contained in the incident data. Then it could be cleaned up to just this:

postIncidents(incident): Observable<any> 
 return this.http.post<any>(this.serviceApiUrl, incident)
 .pipe(
 catchError(this.handleError)
 );

// Example 1:

import HttpClient from '@angular/common/http';


constructor(private http: HttpClient) 

serviceurl:any = http://localhost:3000/;

postIncidents (customerId): Observable<any> 

 const Url = `$serviceurl`;

 const body = `customer_id= $customerId`;

 return this.http.post<any>( Url , body, )

 .pipe(map(res => res))

 .catch(err => err);
 

Example 2 :

// send data with http headers , content type json

 import HttpHeaders from '@angular/common/http';

 const httpOptions = 

 headers: new HttpHeaders(

 'Content-Type': 'application/json'

 );

 postIncidents (customerId): Observable<any> 

 const Url = `$serviceurl`;

 const body = JSON.stringify(

 

 customer_id: customerId 

 );

 return this.http.post<any>(Url, body, httpOptions)

 .pipe(map(res => res))

 .catch(err => err);