Sending a get request with HttpParams in angular

Question

This is the GET mapping in my backend:

@GetMapping(value = "search")
public List<Cat> search(@RequestBody CatDto catDto) {
    return catService.search(catDto);
}

I want to send a GET request to get a list back in Angular HttpClient. I know that I can't send a request body with my GET request and I did this in my component.ts:

search(cat: Cat): Observable<Cat[]> {
   let params = new HttpParams();
   params = params.append('name', cat.name);
   params = params.append('rating', (cat.rating).toString());
   params = params.append('birtday', (cat.birthday).toLocaleDateString());
   return this.httpClient.get<Cat[]>(this.messageBaseUri+'/search', {responseType: 'json', params});
}

Of course I am getting:

Required request body is missing

From my backend. Can I do this somehow without changing my backend or do I have to make my backend endpoint look like this:

@GetMapping(value = "search")
public List<Cat> search(@RequestParam String name,
                        @RequestParam Integer rating,
                        @RequestParam Date birthday) {

    return catService.search(name, rating, birthday);
}

Answer 1

GET requests usually do not have an HTTP body.

Changing your Back-End to accept request params rather than a request body seems like the cleanest solution. However, you can simply change it like this:

@GetMapping(value = "search")
public List<Cat> search(CatDto catDto) {
    return catService.search(catDto);
}

Answer 2

I believe this it you asking for:

Java Controller:

            @GetMapping("/search")
            public List<Cat> search(
                                    @RequestParam("name") String name,
                                    @RequestParam("rating") Integer rating,
                                    @RequestParam("birthday") Date birthday) {
                       return catService.search(name, rating, birthday);
            }

In Angular Service:

            searchCat(params: HttpParams): Observable<any> {
                return this.http.get<any>("/searchUrlHere", { params });
             }

Finally call the search Method in th file with Params:

          onSearch(): void {
            const params = new HttpParams()
              .set('name', "yourName")
              .set('rating', "rating");
              .set('birthday', "birthday");
            this.gotToSearchDate(params);
          }

          gotToSearchDate(params: HttpParams) {
            this.catService.searchCat(params).subscribe(
              res => {
                console.log('List Date: ', res);
              },
              err => {
                console.log('Http error occurred');
              });
          }

OR

         onSearch() {
            const catParams = new HttpParams().set('name', "yourName").set('rating', "rating").set('birthday', "birthday");
            this.catService.searchCat(catParams).subscribe(
              resp => {
                  console.log('List Date: ', res);
              },
              err => {
                console.log('Http error occurred');
              });
          }

Answer 3

GET requests put their params in URL, so

Controller:

public List<Cat> search(@RequestParam CatDto catDto) {
    return catService.search(catDto);
}

ViewModel:

public class CatDto {
  String name;
  Integer rating;
  Date birthday;
}

Angular:

search(cat: Cat): Observable<Cat[]> {
  let params = {
    name: cat.name, // also try "catDto.name": cat.name
    rating: cat.rating.toString(),  // also try "catDto.rating": cat.rating.toString()
    birthday: cat.birthday.toLocaleDateString() // also try "catDto.birthday": cat.birthday.toLocaleDateString()
  }

  return this.httpClient.get<Cat[]>(this.messageBaseUri+'/search', {
    responseType: 'json',
    params: params
  });
}