2

Hi I am trying to pass parameter in POST method url in angular service to construct a URL to fetch some data from an API but when I am calling it on component file I am getting error response.

Where am I doing wrong ?

Example I need this type of url to pass:- https://something/api/v1/map/GetdetailsById?ID=EF-345-RHDJI34-EHI3

In service I am doing :-

// Http Options
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  };

//POST API to show lists
  getOTList(): Observable<any> {
    const params = new HttpParams()
    .set('ID', 'EF-345-RHDJI34-EHI3');
    return this.http
      .post<any>(`${environment.Url}` + `${APIs.getList}`,{params}, this.httpOptions)
      .pipe(
        retry(1),
        catchError(this.handleError)
      )
  }

Ang in component I am doing :

ngOnInit(){
    this.getLists();
  }

getLists(){
    this.addService.getOTList().subscribe((response:any) => {
      if (response.IsSuccess == true) {
        console.log(response);
      }
      else {
        console.log("something is wrong.") //<========== getting this message in console
      }
    });
  }
Optimist Rohit
  • 428
  • 6
  • 24

2 Answers2

2

We are doing a POST request, therefore we need to add a body. Your params should also be set into the same object as your httpOptions, setting the content type to json is really not needed with the HttpClient, it happens automagically, so I would just do:

return this.http.post<any>(`${environment.Url}` + `${APIs.getList}`, {}, { params })

Notice the empty body {}. As you are not even passing a body, this wouldn't need to be a POST request, just thought I'd mention. Also, please don't use any. Typing your data will help you in the future! :)

AT82
  • 71,416
  • 24
  • 140
  • 167
  • Ahh I Understood. But usually it should be GET to retrieve than to POST method. Right ? – Optimist Rohit Dec 04 '21 at 05:12
  • Yes, a `get` works perfectly good here as you are using just http params, not sending a body. I would personally use a `get` request in this case if I had access to the API. Of course as we can see `post` works just as well, we just need to remember to give the request an empty body :) – AT82 Dec 04 '21 at 08:35
  • Got it. One thing, what if user want to put parameters from reactive form UI instead of hardcoding. Then in that case how will I use this code ? – Optimist Rohit Dec 06 '21 at 11:19
  • I don't understand what you mean? If you have a form, then you have values in form, just pass them to your function? – AT82 Dec 06 '21 at 14:01
  • No, that I know , how can I pass values to the parameter – Optimist Rohit Dec 06 '21 at 15:33
  • 1
    `const params = new HttpParams().set('ID', whateverVariable);` ? – AT82 Dec 06 '21 at 15:36
  • But we are defining `HttpParams` in service. How can I do the same in component ? As form will be in component right ? – Optimist Rohit Dec 06 '21 at 16:49
  • Pass them to the service? `getOTList(myFormValuesHere): Observable {` – AT82 Dec 06 '21 at 16:54
  • In component here-- > `this.addService.getOTList().subscribe((response:any)` how can I pass params in `getOTList()` . I donot want to hard code `const params = new HttpParams().set('ID', 'EF-345-RHDJI34-EHI3');` in service ? – Optimist Rohit Dec 06 '21 at 17:07
  • `this.addService.getOTList(formValuesHere).subscribe` – AT82 Dec 06 '21 at 17:11
  • Ok,it same like passing the body . Got it. – Optimist Rohit Dec 07 '21 at 04:12
0

You need to set your params const to the params object in the your http.post call, like this: {params: params}.

So your updated service function should look like this:

getOTList(): Observable<any> {
   const params = new HttpParams()
   .set('ID', 'EF-345-RHDJI34-EHI3');
   return this.http.post<any>(`${environment.Url}` + `${APIs.getList}`, {params:params}, this.httpOptions)
      .pipe(
         retry(1),
         catchError(this.handleError)
      )
}
Stoobish
  • 1,202
  • 4
  • 23