Send Http request to API with object as parameter in Angular

Question

I have a search form where I can fill in input fields in my web application. These input fields will end up in my SearchCriteria object.

Once I click on the search button, I want to send that SearchCriteria object to an API, which will return a collection of matching Order objects. Now that backend code is all in place, I just need to do the correct API call.

This is what I tried, but I always seem to get an http 400 error.

  getOrders(searchCriteria: SearchCriteria): Observable<Order[]> {

    let requestoptions = {
      'headers': new HttpHeaders({'Content-Type': 'application/json'}),
      'withCredentials': true
    };

    return this.http.post(environment.backend + "/api/orders/getOrders", searchCriteria, requestoptions).pipe(map((response: any) => {
      return response;
    }));
  }

The request URL will look like this:

Request URL:http://localhost:8080/angular-rest/api/orders/getOrders?searchCriteria=%7B%22user%22:%7B%22firstName%22:null,%22lastName%22:null%7D,%22orderMinAmount%22:null,%22orderMaxAmount%22:null,%22orderDate%22:null,%22product%22:%22Phone%22%7D

/api/orders/getOrders looks like:

@RequestMapping(path = "getOrders", method = POST, consumes = "application/json", produces = "application/json")
public Collection<Order> getOrders(@RequestBody SearchCriteria searchCriteria) {
    return orderService.getOrders(searchCriteria);
}

Now I've been reading things, but have not been able to figure it out.

What I actually want (I think) is to send the object (searchCriteria) in the request body of my http request, so the URL doesn't look that long and of course the http request is succesful.

What am I doing wrong? What could be better?

@Mridul: No, it was just a try-out of mine. I edited my post and added the specific API method if that might make more sense. — Sitjuh
– Sitjuh, Commented Feb 25, 2020 at 9:42
You can't send a message body in a GET request. If your API accepts a POST, then use http.post. Otherwise map your object to params using javascript — Kurt Hamilton
– Kurt Hamilton, Commented Feb 25, 2020 at 9:42
Second param in POST should be message body instead of options — Mridul
– Mridul, Commented Feb 25, 2020 at 9:48
If you can use post, remove params from requestoptions and try post(url, JSON.stringify(object), requestoptions). — Barremian
– Barremian, Commented Feb 25, 2020 at 9:50

Santosh Shinde · Accepted Answer · 2020-02-25 09:52:14Z

1

Try like this

   getOrders(searchCriteria: SearchCriteria): Observable<Order[]> {
          let headers = new HttpHeaders({'Content-Type': 'application/json'}),
          return this.http.post(environment.backend + "/api/orders/getOrders",searchCriteria, {headers})
          .pipe(map((response: any) => {
            return response;
           }));
      }

answered Feb 25, 2020 at 9:52

Santosh Shinde

1,21210 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Send Http request to API with object as parameter in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related