Setting the body of HttpParams() dynamically

Question

Setting the body of HttpParams() dynamically

When working with Angular 5 HttpClient, setting HttpParams() can be a bit tricky.

const body = new HttpParams()
    .set('email', 'example@example.com')
    .set('password', 'pass');

However, trying to set HttpParams() in another way doesn't seem to work as expected.

const paramsMap = new Map<any, any>();
paramsMap.set("email", "example@example.com");
paramsMap.set("password", "pass");

paramsMap.forEach((value: any, key: any) => {
    body.set(key, value);
});

Why is it not setting the values correctly? And what is the alternative approach to achieve the same result?

typescript angular6 angular-httpclient

Answer 1

Answer №1

When working with HttpParams, it's important to remember that they are immutable. This means that each time you use the set() method, a new instance is returned. One way to overcome this limitation is by updating the reference as shown below:

const params = {
  test: 'true'
}

let httpParams = new HttpParams();

Object.keys(params).forEach(k => {
  httpParams = httpParams.set(k, params[k]);
});

console.log(httpParams.get('test'));

Answer 2

When working with HttpParams, it's important to remember that they are immutable. This means that each time you use the set() method, a new instance is returned. One way to overcome this limitation is by updating the reference as shown below:

const params = {
  test: 'true'
}

let httpParams = new HttpParams();

Object.keys(params).forEach(k => {
  httpParams = httpParams.set(k, params[k]);
});

console.log(httpParams.get('test'));

Answer 3

Answer №2

The APIs have slight differences, allowing you to send dynamic requests with parameters in the query string.

let paramsMap = new Map<any,any>();
paramsMap.set('username','admin');
paramsMap.set('password','admin');

let params = new HttpParams();
paramsMap.forEach((value: any, key: any) => {
  params = params.set(key, value);
});

return this.http.request<any>('post', this.url + LOGIN_URL, { 'params': params});

If you examine HttpClient methods, you can observe how it functions.

Response to the initial comment:

HttpParams is not immutable; it is used to pass parameters to the query string. To achieve this, follow these steps:

let paramsMap = new Map<any,any>();
paramsMap.set('email','example@example.com');
paramsMap.set('password','pass');   

return this.http.post<any>(this.url + LOGIN_URL, mapToObject(paramsMap));

/**
 * Recursive function that takes a Map and returns a JSON object
 * @param map
 * @returns {any}
 */
function mapToObject(map) {
  const out = Object.create(null)
  map.forEach((value, key) => {
    if (value instanceof Map) {
      out[key] = mapToObject(value)
    }
    else {
      out[key] = value
    }
  });
  return out
}

Answer 4

The APIs have slight differences, allowing you to send dynamic requests with parameters in the query string.

let paramsMap = new Map<any,any>();
paramsMap.set('username','admin');
paramsMap.set('password','admin');

let params = new HttpParams();
paramsMap.forEach((value: any, key: any) => {
  params = params.set(key, value);
});

return this.http.request<any>('post', this.url + LOGIN_URL, { 'params': params});

If you examine HttpClient methods, you can observe how it functions.

Response to the initial comment:

HttpParams is not immutable; it is used to pass parameters to the query string. To achieve this, follow these steps:

let paramsMap = new Map<any,any>();
paramsMap.set('email','example@example.com');
paramsMap.set('password','pass');   

return this.http.post<any>(this.url + LOGIN_URL, mapToObject(paramsMap));

/**
 * Recursive function that takes a Map and returns a JSON object
 * @param map
 * @returns {any}
 */
function mapToObject(map) {
  const out = Object.create(null)
  map.forEach((value, key) => {
    if (value instanceof Map) {
      out[key] = mapToObject(value)
    }
    else {
      out[key] = value
    }
  });
  return out
}

Answer 5

Answer №3

Give this a shot:

const searchParams = new URLSearchParams();

for (const [key, value] of Object.entries(data)) {
  console.log(`${key}: ${value}`);
  if (value !== '' && value !== undefined) {
    searchParams.append(key, value);
  }
}

Answer 6

Give this a shot:

const searchParams = new URLSearchParams();

for (const [key, value] of Object.entries(data)) {
  console.log(`${key}: ${value}`);
  if (value !== '' && value !== undefined) {
    searchParams.append(key, value);
  }
}

Setting the body of HttpParams() dynamically

Answer №1

Answer №2

Answer №3

Similar questions

Issues arise when exporting a functional component within a ReactJS module

Iterate over Observable data, add to an array, and showcase all outcomes from the array in typescript

Guide on utilizing the "window" attribute within Angular framework

Encountered an issue while configuring the Apollo server - The type '() => void' cannot be assigned to type '() => DataSources<object>'

Interfaces defined as function expressions in Typescript are not recognized when written as tuples

Sending common parameters to a React functional component within a TypeScript definition file

Error encountered: Unexpected JSON token at position 0 while executing npm start on a React TypeScript project

Tips on inferring a distinct generic type for every element within an array of objects

Fetching data in VueJs before redirecting to a new page

Resolving Cross-Origin Resource Sharing problem in Google authentication and authorization with React, Node.js, and Passport

Clicking on the image in Angular does not result in the comments being displayed as expected

Fixing the Bootstrap 4 issue "Popper.js required for Bootstrap dropdowns" using Aurelia CLI and Require.js

Guide on transferring the token and user information from the backend to the front-end

set a value to a concealed ngModel

Encountering a ReferrenceError when utilizing jQuery with TypeScript

Obtain access to the child canvas element within the parent component

Error: Unable to retrieve options using this.getOptions function. This issue is unrelated to Vue, it is occurring within

How to pass parameters from a directive to a child component in Angular

Building an interactive menu in Angular: A step-by-step guide

What is the best way to combine two messages in the Global Message Service within an Angular application?