From URLSearchParams to HttpParams: A Guide for Angular HttpClient

Question

From URLSearchParams to HttpParams: A Guide for Angular HttpClient

Facing an issue while updating from Http to HttpClient in a service.ts file on Angular8.

I've made the necessary changes from Http and Headers to HttpClient and HttpHeaders, as well as removed '.pipe(map((response) => response.json().response));'. The options for search:params.toString() were not working with HttpParams, so I switched to params only. However, the requests are not functioning as expected :(

Before (Http)

...

After (HttpClient)

...

angular typescript angular-httpclient

Answer 1

Answer №1

Assuming that the variable this.http is indeed of type HttpClient, we need to consider the type definition for HttpClient.get(). According to the definition, the options argument may contain an optional property called params with the type:

params?: HttpParams | { [param: string]: string | string[]; };

It's important to note that this property cannot be just a single string, as returned by params.toString(). It should either be a key-value object containing strings or an instance of the HttpParams class.

Since your params variable aligns with the type

HttpParams</code, you can directly pass it without any conversion.</p>
<p>Instead of:</p>
<pre><code>{ headers: this.headers, params: params.toString() }

You should use:

{ headers: this.headers, params }

However, it seems like in both cases, the params variable remains empty. Unless there are omitted portions where values are added to it during initialization.

Edit:

After reviewing your complete code, the reason behind the empty state of params becomes clearer.

In the case of the URLSearchParams class, the set() method acts as a void function, meaning it alters the existing object without returning anything. The original approach involved setting multiple values and then converting the object to a string (segments involving params.set() were not originally shared).

(method) URLSearchParams.set(name: string, value: string): void

Sets the value associated with a specified search parameter. If other values exist, they get replaced.

Conversely, the behavior of the HttpParams class differs. Each call to params.set() creates a new instance rather than updating the current one.

(method) HttpParams.set(param: string, value: string): HttpParams

Substitutes the value for a given parameter.

@param param — Parameter name.

@param value — New value.

@return — Updated body with the fresh value.

The issue here lies in failing to assign the return value of params.set() back to the main params variable. To rectify this, replace each occurrence of const params with let params to enable overwriting. Furthermore, change all instances of params.set() to params = params.set(). For example:

let params: HttpParams = new HttpParams();
params = params.set('page', page.toString());
params = params.set('size', size.toString());
params = params.set('sort', sort);

Answer 2

Assuming that the variable this.http is indeed of type HttpClient, we need to consider the type definition for HttpClient.get(). According to the definition, the options argument may contain an optional property called params with the type:

params?: HttpParams | { [param: string]: string | string[]; };

It's important to note that this property cannot be just a single string, as returned by params.toString(). It should either be a key-value object containing strings or an instance of the HttpParams class.

Since your params variable aligns with the type

HttpParams</code, you can directly pass it without any conversion.</p>
<p>Instead of:</p>
<pre><code>{ headers: this.headers, params: params.toString() }

You should use:

{ headers: this.headers, params }

However, it seems like in both cases, the params variable remains empty. Unless there are omitted portions where values are added to it during initialization.

Edit:

After reviewing your complete code, the reason behind the empty state of params becomes clearer.

In the case of the URLSearchParams class, the set() method acts as a void function, meaning it alters the existing object without returning anything. The original approach involved setting multiple values and then converting the object to a string (segments involving params.set() were not originally shared).

(method) URLSearchParams.set(name: string, value: string): void

Sets the value associated with a specified search parameter. If other values exist, they get replaced.

Conversely, the behavior of the HttpParams class differs. Each call to params.set() creates a new instance rather than updating the current one.

(method) HttpParams.set(param: string, value: string): HttpParams

Substitutes the value for a given parameter.

@param param — Parameter name.

@param value — New value.

@return — Updated body with the fresh value.

The issue here lies in failing to assign the return value of params.set() back to the main params variable. To rectify this, replace each occurrence of const params with let params to enable overwriting. Furthermore, change all instances of params.set() to params = params.set(). For example:

let params: HttpParams = new HttpParams();
params = params.set('page', page.toString());
params = params.set('size', size.toString());
params = params.set('sort', sort);

From URLSearchParams to HttpParams: A Guide for Angular HttpClient

Answer №1

Similar questions

Problem with Packaging Angular and Spring Boot Applications

Angular 7: Show selected value upon clicking Radio button

Is it possible to nest a component within another component in the latest iteration of Angular2?

Using a dynamic image source in an Ionic 3 background

Application of Criteria for Zod Depending on Data Stored in Array Field

The variable 'isSideBarOpen' is not a recognized property on the object 'AppComponent'

Angular 6's Grouping Feature: The Art of Nesting FormArrays

Removing API request in React.js

Angular form retains the previous value when saving

Learn how to effectively utilize the onload event in Angular 2 when working with dynamically inserted image sources

Improve your typing accuracy by enforcing strict null checks

Using Angular to display asynchronous data with ngIf and observables

Converting a Typescript project into a Node package: A step-by-step guide

I'm facing issues with the angular-stl-model-viewer in my current Angular project

Building a Custom Dropdown Select List with FormControlName and ControlValueAccessor in Angular 8

Navigate to a different directory within Cypress by utilizing the cy.exec() function

Can the contents of a JSON file be uploaded using a file upload feature in Angular 6 and read without the need to communicate with an API?

Building an Event Scheduler in Outlook Calendar with Angular 5

Angular Object

Challenges with displaying css/bootstrap classes within angular2