What is the proper way to format parameters for a get request?

Question

What is the proper way to format parameters for a get request?

I am attempting to achieve the following:

export interface ApiCallOptions {
  abc: string,
  xyz: number
}
makeRequest (options: ApiCallOptions) {
  return this.http.get('/some/path/to/endpoint', { params: options });
}

However, I encounter an error stating that ApiCallOptions is not a HttpParams object... I attempted casting options as HttpParams, but it still fails...

Therefore, I proceeded with:

  const params = new HttpParams({ fromObject: options });
  return this.http.get('/some/path/to/endpoint', { params: params });

Resulting in:

The expected type comes from property 'fromObject' which is declared here on type 'HttpParamsOptions'

What mistake am I making here?

angular typescript

Answer 1

Answer №1

To achieve this, you can follow these steps:

fetchData (options: RequestOptions) {
  return this.http.get('/api/data', { params: this.prepareParams(options) });
}

private prepareParams(parameters) {
  let queryParams = new QueryParams();
  let keys = Object.keys(parameters);
  keys.forEach(key => {
    if (parameters[key] !== null) {
      queryParams = queryParams.append(key, parameters[key]);
    }
  });
  return queryParams;
}

What will be the result?

Answer 2

To achieve this, you can follow these steps:

fetchData (options: RequestOptions) {
  return this.http.get('/api/data', { params: this.prepareParams(options) });
}

private prepareParams(parameters) {
  let queryParams = new QueryParams();
  let keys = Object.keys(parameters);
  keys.forEach(key => {
    if (parameters[key] !== null) {
      queryParams = queryParams.append(key, parameters[key]);
    }
  });
  return queryParams;
}

What will be the result?

Answer 3

Answer №2

Extracted from HttpParamsOptions

export interface HttpParamsOptions {
  /**
   * Represents HTTP parameters in URL-query-string format as a string.
   * Cannot be used together with `fromObject`.
   */
  fromString?: string;

  /** Object map of the HTTP parameters. Cannot be used together with `fromString`. */
  fromObject?: {[param: string]: string|number|boolean|ReadonlyArray<string|number|boolean>};

  /** Codec for encoding used to parse and serialize the parameters. */
  encoder?: HttpParameterCodec;
}

The fromObject property is defined with an index signature using a string as the property name.

For creating a new instance of HttpParams:

import {
  HttpParamsOptions,
} from '@angular/common/http';

const paramsOption = {
  fromObject: options as { [key: string]: any },
} as HttpParamsOptions;
const params = new HttpParams(paramsOption);

Answer 4

Extracted from HttpParamsOptions

export interface HttpParamsOptions {
  /**
   * Represents HTTP parameters in URL-query-string format as a string.
   * Cannot be used together with `fromObject`.
   */
  fromString?: string;

  /** Object map of the HTTP parameters. Cannot be used together with `fromString`. */
  fromObject?: {[param: string]: string|number|boolean|ReadonlyArray<string|number|boolean>};

  /** Codec for encoding used to parse and serialize the parameters. */
  encoder?: HttpParameterCodec;
}

The fromObject property is defined with an index signature using a string as the property name.

For creating a new instance of HttpParams:

import {
  HttpParamsOptions,
} from '@angular/common/http';

const paramsOption = {
  fromObject: options as { [key: string]: any },
} as HttpParamsOptions;
const params = new HttpParams(paramsOption);

What is the proper way to format parameters for a get request?

Answer №1

Answer №2

Similar questions

Prevent Angular from automatically scrolling to the top when subscribing to a timer

Potential uncertainty in Angular FormControl email validation due to potential null Object

What is the process for accessing and updating values within nested form fields in angular2?

Create TypeScript function to recursively generate generic keys, combining keys and excluding any objects

Angular2 - ERROR: Route configuration must have only one "component" specified

A TypeScript function that returns a boolean value is executed as a void function

Issue: subscribe function is not definedDescription: There seems to be an

When trying to integrate Angular.ts with Electron, an error message occurs: "SyntaxError: Cannot use import statement

Embedded template does not utilize property binding ngif with any directive

Karma coverage report in Angular 2 fails to capture statements within fakeAsync() blocks

Determine whether there are a minimum of two elements in the array that are larger than zero - JavaScript/Typescript

There are no built-in animations in the Angular 2 API

Is there a way to ensure DRY principles are followed while utilizing Redux Toolkit's asyncThunkCreator?

Retrieving the keys from an object that has already been entered and converting them into types in TypeScript

Navigating through object keys in YupTrying to iterate through the keys of an

The automatic type inference in Typescript is faulty

Accessing data retrieved from an API Subscribe method in Angular from an external source

Storing MongoDB data in local storage as an array using a GET request: A step-by-step guide

Assigning a dynamic name to an object in Typescript is a powerful feature

Tips for accessing data from a JSON file in a compiled Angular2 project