It appears that using dedicated objects such as HttpParams or UrlSearchParams do not seem to work when dealing with Angular 5 and HTTP GET query parameters

I'm facing a perplexing issue that I just can’t seem to figure out. Below is the code snippet making a call to a REST endpoint:

this.http.get<AllApplicationType[]>(environment.SUDS_API_SERVICE_URL + environment.SUDS_ALL_APPLICATIONS_URL, this.setQueryParams(page, size)).toPromise() ...

The setQueryParams function has the following structure:

setQueryParams(page?: number, size?: number): {} {
const startFrom = page * size + 1;
const params = new HttpParams();
params.set('startFrom', startFrom.toString());
params.set('maxRecords', size.toString());
return params;

}

Upon backend request execution, the query parameters appear to be null. It’s puzzling why they are not being transferred over. Could it be an incorrect methodology, or is there another reason for this abnormal behavior?

angulartypescriptangular5

Answer №1

After several attempts, it became clear that neither HttpParams nor URLSearchParams objects were effective in my situation. Despite trying both, they failed to deliver the desired results. The workaround involved manually constructing parameters like so:

setRequestParams(page?: number, size?: number): {} {
const startFrom = page * size + 1;
const params = {'startFrom': startFrom.toString(), 'maxRecords': size.toString()};
const options = {params: params};
return options;

}

It appears there may be a bug within Angular HttpClient causing this issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for retrieving the API configuration for my admin website to incorporate into the Signin Page?

My admin website has a configuration set up that dynamically updates changes made, including the API. However, I want to avoid hardcoding the base URL for flexibility. How can I achieve this? Please see my admin page with the config settings: https://i.st ...

htmljsonangulartypescriptapi

What is the best approach to limit the return type of a function in JSX?

Is it possible to create a function where the return type should be a specific JSX type? For instance: const setHosting : <GitlabLogo> | <GithubLogo> = (h: Hosting) => ??? In this case, the return type must either be <GitlabLogo> or ...

reactjstypescriptjsx

The node command line does not recognize the term 'require'

My Typescript project was compiling and running smoothly until recently when I started encountering the error ReferenceError: require is not defined every time I try to run node. I am uncertain whether this issue stems from Typescript, as even when I ru ...

node.jstypescriptrequirecommonjs

Failure in Dependency Injection in Angular with Typescript

My mobile application utilizes AngularJS for its structure and functionality. Below is the code snippet: /// <reference path="../Scripts/angular.d.ts" /> /// <reference path="testCtrl.ts" /> /// <reference path="testSvc.ts" /> angular.mo ...

angularjstypescript

Creating an interface for React props

Hey everyone, I'm facing an issue and need some advice. I prefer using interfaces to maintain readability and utilize intellisense in my code. However, I'm struggling with implementing this approach when working with data passed through props. H ...

reactjstypescriptcomponents

Utilizing AWS Amplify with TypeScript and TypeScript Lambdas for powerful web development

Currently, I am working on a project that involves a nextjs frontend with TypeScript and AWS Amplify for the backend. My intention is to write my Lambda functions in TypeScript as well. However, I have encountered an issue where I have one tsconfig.json fi ...

typescriptamazon-web-servicesaws-lambdaaws-amplifyserverless

Encountering an error while running npm install - package.json data parsing failed

Encountering an error during npm install on Windows 10, using node v6.10.3 and npm v3.10.10 Please assist in resolving this issue. Error message: npm ERR! npm v3.10.10 npm ERR! file C:\angular2-helloworld\package.json npm ERR! code EJSONPARSE ...

jsonnode.jsangularnpm

Tips for incorporating Angular-specific code into Monaco Editor

I am currently developing a browser-based IDE using the Monaco editor. I'm allowing users to input Angular-specific code into the editor, like this: import { Component } from '@angular/core'; @Component({ selector: 'app-root', ...

angularmonaco-editor

Leveraging the power of the map function to manipulate data retrieved

I am working on a nextjs app that uses typescript and a Strapi backend with graphql. My goal is to fetch the graphql data from strapi and display it in the react app, specifically a list of font names. In my react code, I have a query that works in the p ...

typescriptnext.jsgraphqlstrapi

Defining TypeScript class events by extending EventEmitter

I have a class that extends EventEmitter and is capable of emitting the event hello. How can I properly declare the on method with a specific event name and listener signature? class MyClass extends events.EventEmitter { emitHello(name: string): void ...

node.jstypescript

Is there a way to efficiently compare multiple arrays in Typescript and Angular?

I am faced with a scenario where I have 4 separate arrays and need to identify if any item appears in more than two of the arrays. If this is the case, I must delete the duplicate items from all arrays except one based on a specific property. let arrayA = ...

javascriptangulartypescriptecmascript-6ecmascript-2016

Accessing clipboard contents upon button click using TypeScript

Seeking assistance with retrieving data from the clipboard in TypeScript after clicking on a button. Please provide guidance. Thank you! ...

javascriptangularjstypescript

Ways to implement distinct values for model and input field in Angular 5

I'm currently working on an Angular 5 application and I have a requirement to format an input field with thousand separators (spaces). However, the model I am using only allows numbers without spaces. Since my application is already fully developed, ...

javascriptangulartypescriptangular5

Tips on Showing a Unique List in Mat-Table?

Here's what I'm trying to accomplish: I have a list and I want to display it without any duplicates. I attempted using the code (this.model.map(x => x.map), but it resulted in an error. Can anyone help me fix this? model: myModel[]; myObj:any; re ...

angulartypescriptrxjs

Issue with TypeScript Generics: The operand on the left side of the arithmetic operation must be of type 'any', 'number', or 'bigint'

I seem to be encountering an error that I can't quite decipher. Even though I've clearly set the type of first as a number, the code still doesn't seem to work properly. Can someone provide insights on how to fix this issue? function divide& ...

typescripttypescript-generics

Leveraging the power of APIs to bring in the Chicago Art Institute into a React TypeScript

Struggling to import a list of image details from the Chicago Art Institute into my React application. I need help understanding APIs, so a detailed answer would be appreciated. I have the code for the image list but can't figure out how to make it wo ...

reactjstypescript

Angular 2 fails to redirect to a 404 page if both the route parameter and address are not valid

Currently, while working on my application with Angular 4.1.1, I have a habit of declaring routing in every module I create. For instance, in the file new-cars.routing.module.ts: import { NgModule } from '@angular/core'; import { RouterModule, ...

javascriptc#angulartypescriptasp.net-core

Retrieving an Enum member based on its value in TypeScript

I am working with an enum called ABC: enum ABC { A = 'a', B = 'b', C = 'c', } In addition, I have a method named doSomething: doSomething(enum: ABC) { switch(enum) { case A : console.log(A); break; case ...

javascripttypescriptenums

Angular lazy loading routes do not function as intended

I currently have a project that is divided into different modules. Among these modules, the ones that are lazy loaded include the about and contact modules. The navigation menu containing the router links is located in a feature module alongside the header ...

angularrouteslazy-loading

Limiting File Access for a Google Cloud Platform Bucket Using Node.js

Below is the code for my fileUploadService: import crypto from 'crypto'; var storage = require('@google-cloud/storage')(); uploadFile(req, bucket, next) { if (!req.file) { retur ...

node.jsangularexpressgoogle-cloud-storage