Using HttpParams to make a GET request in Angular

Question

Using HttpParams to make a GET request in Angular

Here is the GET mapping in my backend:

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

I am trying to send a GET request to retrieve a list using Angular's HttpClient. Since GET requests cannot have a request body, I attempted the following 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('birthday', (cat.birthday).toLocaleDateString());
   return this.httpClient.get<Cat[]>(this.messageBaseUri+'/search', {responseType: 'json', params});
}

However, I encountered the error:

Required request body is missing

Coming from my backend. Is there a way to achieve this without modifying my backend or do I need to change my backend endpoint as follows:

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

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

angular typescript spring-boot angular-httpclient

Answer 1

Answer №1

It seems like you are looking for the following information:

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);
            }

Angular Service:


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

To call the search Method with Parameters:


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

          goToSearchData(params: HttpParams) {
            this.catService.searchCat(params).subscribe(
              res => {
                console.log('List Data: ', 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 Data: ', res);
              },
              err => {
                console.log('Http error occurred');
              });
          }

Answer 2

It seems like you are looking for the following information:

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);
            }

Angular Service:


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

To call the search Method with Parameters:


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

          goToSearchData(params: HttpParams) {
            this.catService.searchCat(params).subscribe(
              res => {
                console.log('List Data: ', 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 Data: ', res);
              },
              err => {
                console.log('Http error occurred');
              });
          }

Answer 3

Answer №2

Typically, GET requests do not contain an HTTP body.

One way to improve your Back-End is by modifying it to accept request parameters instead of a request body. You can achieve this by implementing the following code:

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

Answer 4

Typically, GET requests do not contain an HTTP body.

One way to improve your Back-End is by modifying it to accept request parameters instead of a request body. You can achieve this by implementing the following code:

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

Answer 5

Answer №3

When making GET requests, the parameters are included in the URL.

In the Controller:

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

Within the ViewModel:

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

Using Angular:

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

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

Answer 6

When making GET requests, the parameters are included in the URL.

In the Controller:

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

Within the ViewModel:

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

Using Angular:

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

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

Using HttpParams to make a GET request in Angular

Answer №1

Answer №2

Answer №3

Similar questions

Getting started with testing in Angular 2

Challenge with Routing in Angular 2

Creating a loading spinner with the help of an rxjs BehaviorSubject

The label overlay for MatInput remains fixed within the input box in an Angular form

Uncomplicating RxJs Operators: Decoding switchMap and combineLatest

Using custom hooks in JSX triggers a TypeScript error when the returned component is accessed

Tips for effectively passing navigation as props in React Navigation with Expo

Troubleshooting Angular Build Errors: Integrating Three.js

Angular - Eliminate objects from an array based on their index matching a value in a separate array

Angular Form Template Unidirectional Data Binding Example

The error message displayed was "Unable to define the isMultiple property for Jasmine."

Is there a way for me to steer clear of having to rely on the Elvis Operator?

What causes the lack of impact on lambda rendering speed despite integrating webpack?

What's the process for validating i18n dictionaries using TypeScript?

Issue with React useCallback not being triggered upon a change in its dependencies

Troubleshooting the issue with generateStaticParams() in NextJs/TypeScript

Ways to substitute a null value in ngFor

Using Threejs to create an elbow shape with specified beginning and ending radii

Customizing a generic method in typescript

Mapping the preselected values of multiple input fields into an array in Angular 6: A step-by-step guide