Tips for sending data in Angular 8's Http GET method within a service class, especially when the backend requires a dictionary format

I am working on a C# backend with an HttpGet method that is expecting a dictionary as request parameters.

public async Task<IActionResult> Search([BindRequired, FromQuery] IDictionary<string, object> pairs)

Currently, my frontend is built in Angular 8. When the backend expects a dictionary like this, what should I pass in the Angular service class get method? Should it be a Query String or something else?

Right now, I am passing a query string in this manner:

search(parameters: any): Observable<any> {

var queryString = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&');

return this.httpClient.get(environment.host + environment.search + queryString);

}

However, this approach is not working as expected. Even though values are being passed from the frontend, when I debug and check, the backend request parameter values are showing up as null.

Thank you for your help!

Answer №1

Everything is functioning as intended. In what way do you anticipate your program to convert a string into a base class? What are your expectations?

The standard model binding process involves scanning the fields of the target class and matching them with corresponding fields from the serialized data.

object does not have any fields, so there is no practical reason to deserialize data into it.

If you have a complex scenario where you need unknown data to be deserialized into your classes, you can create a custom model binder. You can refer to a detailed example using reflection in this Stack Overflow answer.

However, it is generally advisable to expect non-dynamic data types in your API, even if the type may seem generic.

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

Having trouble with accessing properties like `d3.svg()`, `d3.scale()` and other features of d3js within an Angular 2 environment

Struggling to incorporate d3.js into angular2. Below is the command I used to install d3 in Angular2: npm install --save d3 install --save-dev @types/d3 This is how my package.json appears: { "name": "my-app", "version": "0.0.0", "license": "M ...

Explore an example of using custom controls in a FormArray within an Angular 5 reactive form on StackBlitz

Check out my sample project on stackblitz that tests nesting components and retrieving the complete form value. https://stackblitz.com/edit/mensand-hobbies-football-tennis This is a demonstration where I aim to utilize different components stored in an a ...

Finding parameters in Angular 4

I am working on implementing a multilanguage feature in an Angular app and I need to establish the default language when the site loads. The two languages supported are Spanish and English, with Spanish being the default language. In order to achieve this, ...

What is the best way to merge the data from a resolver into a combineLatest function?

I'm facing an issue with my resolver that returns an Observable<Product[]> on a page to load data. After that, I try to combine this stream with another using combineLatest. However, the problem arises when combining the streams as I receive an ...

Retrieving the value of an object using an array of keys

Consider the following object: const obj = { A:{ a1:'vala1', a2:'vala2' }, B:{ b1: 'valb1', b2: 'valb2' }, C:{ c1:{ c11:'valc11' }, c2:'valc2' } } We also have an array: const ...

Adding a translucent background image across the entire page in Angular: What's the best method?

I need the background image to extend across the entire page, including covering the Material Data Table. The background should be transparent so that the content of the table remains readable. What is the most effective method to achieve this? Here is th ...

Implementing conditional properties in Typescript based on the value of another property

Is it possible to make a property required in a type based on the presence of another property? Here's an example: type Parent = { children?: Child[]; childrenIdSequence: string[]; // This property should only be required when `children` is prov ...

Ran into an issue while executing ng build --prod: The JavaScript heap has run out of memory

After executing ng build --prod, I encounter the error below. What steps can I take to resolve this issue? FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory ...

Performing unit tests in Angular 2 by utilizing a host component

Currently, I am diving into the world of unit testing in Angular2 v2.0.0. To kickstart my journey, I decided to utilize angular-cli to scaffold a project and execute unit tests using 'ng test'. The CLI gracefully generates a sample component alon ...

Retrieving information from a Kendo grid cell

I am working on a web application that utilizes Kendo Grid. How can I retrieve the values of the "Ticket No" from the selected checkboxes? https://i.stack.imgur.com/aPOje.png This is my code: var grid = $("#poGrid").data("kendoGrid"); grid.items().filte ...

`As the input value for these methods`

I am encountering an issue when trying to pass in this.value as a method argument. The field values are all strings and the constructor arguments are also all strings, so I don't understand why it's not working. When I attempt to pass in this.cla ...

"Utilizing the same generic in two interface properties in Typescript necessitates the use of the

I have created an interface as follows: interface I<T>{ foo: T arr: T[] } After defining the interface, I have implemented an identity function using it: const fn = <T>({foo, arr}: I<T>) => ({foo, arr}) When calling this function l ...

The issue I'm facing with the change handler for the semantic-ui-react checkbox in a React+Typescript project

Hey there! I'm currently facing an issue with two semantic-ui-react checkboxes. Whenever I try to attach change handlers to them, I end up getting a value of 'undefined' when I console log it. My goal is to retrieve the values of both check ...

typescript undefined subscription to observable

After making an http request to fetch some data, I am facing issues in displaying it as intended. The dropdown select for entriesPerPage, and the left and right cursors for switching page in pagination are working fine. However, upon switching a page, I en ...

What is the process for defining a default value for a template-driven form input in Angular 2?

I have a simple input element in my form that requires a default initial value to be set. <input type="number" name="interest_rate" [(ngModel)]="interest_rate"> In my code, I included this.form.controls['interest_rate'].patchValue(this.a ...

Encountered an issue with valid types while executing the following build

Encountering an error when attempting to run the next build process. https://i.stack.imgur.com/qM3Nm.png Tried various solutions including updating to ES6, switching the module to commonJs, downgrading webpack to version 4 with no success. The only worka ...

Check for mobile browser without having to refresh the page

Currently, I am facing an issue with closing the sidebar when the user clicks on Click Me button in mobile view using flexbox layout. The problem arises because the page needs to be refreshed for it to recognize if it's in mobile mode or not by utiliz ...

Troubleshooting the ngcc error in StackBlitz when using MatTableModule from Material Design

Upon comparing my project config with this sample, I am puzzled by the error message that keeps popping up: An error in turbo_modules/@angular/[email protected]/table/table-module.d.ts (8:22) It seems that MaterialModule is trying to export something ...

TypeScript's type inference feature functions well in scenario one but encounters an error in a different situation

I recently tried out TypeScript's type inference feature, where we don't specify variable types like number, string, or boolean and let TypeScript figure it out during initialization or assignment. However, I encountered some confusion in its be ...

What is the best way to utilize Typescript when making queries to Firebase?

I have successfully integrated push notifications for my app using Firebase Cloud Functions. Now, I am looking to enhance the user experience by updating the app's badge count alongside the push notifications. I understand that this can only be achiev ...