.Net Core receives the method name instead of the parameter value passed by TypeScript

Can someone explain why the code is passing "getFullReport" as the eventId instead of the actual value while making its way to the .Net Core 3.1 side?

Prior to the call, I double-checked with a console.log to ensure that eventId holds the correct ID I am anticipating on the .Net Core side. However, when I put a breakpoint there, the eventId seems to be displaying the name of the TypeScript method (getFullReport) rather than the expected ID shown before the call on the client-side.

  getFullReport(eventId: string) {

    var params = new HttpParams();
    params.append('eventId', eventId);

    this.http.get<AccidentDetails>('api/accidents/getfullreport', { params: params }).subscribe(
      result => {
        this.accidentDetails = result;
      },
      error => console.error(error)
    );

  }

The code in .Net Core looks like this:

[HttpGet("{eventId}")]
public FullReport GetFullReport(string eventId)

The eventId being received here is not the one intended to be sent from the client's end.

Answer №1

Within the HttpGet attribute, the parameter represents the endpoint's route. By including a variable name (e.g., {variable_name}) in the route, you are essentially mapping that part of the URL to a corresponding variable with the same name. In this case, you see eventId being assigned the value of getFullReport because the path is defined as: api/accidents/getFullReport which translates to hitting the URL path api/accidents/{eventId} where eventId corresponds to getFullReport. Does this clarification make sense?

To correct this issue, use the following approach:

[HttpGet("getFullReport/{eventId}")]
public FullReport GetFullReport(string eventId)

Answer №2

Following Matt Kae's advice, I made a change to the attribute on the .Net Core side:

[HttpGet("RetrieveFullInfo/{eventId}")]

I then simplified the TypeScript code by eliminating the params section and directly appending the eventId to the URL call:

this.http.get<AccidentDetails>('api/Accidents/RetrieveFullReport/' + eventId).subscribe()

This adjustment successfully resolved the issue at hand.

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

For an unknown reason, I am facing difficulties in using the Storage feature from @angular/fire in ANGULAR 16

Recently I started exploring Angular/Fire and decided to test out some of its features by creating a basic app. Firestore and authentication were working smoothly, but when I attempted to include Storage, an error message popped up: ERROR FirebaseError: ...

What does an exclamation mark signify in Angular / Type Script?

Being a newcomer in the world of front end development, I am currently teaching myself Angular (11.2.10). While exploring a sample project, I noticed this particular piece of html template code written by another person and utilized in multiple places: < ...

Sourcemaps experiencing major issues when using TypeScript and the browserify/gulp combination

Despite successfully generating sourcemaps from my build process using browserify with gulp, I encountered issues when trying to debug. Breakpoints would often jump to different lines in Chrome, indicating that the script was not pausing where it should. A ...

Is it impossible to extend a Typescript class with an overriding method that uses a different parameter?

I am currently working on a Typescript MVC app and encountering an issue. When I try to extend my BaseController and override the ajaxMethod with different parameters, my transpiler throws an error. Any help would be appreciated. Below is the code snippet ...

What is the process for obtaining the ID of a selected node within ngx-graph?

Issue My challenge lies in using the ngx-graph library to create a flow chart within Angular 9. I am attempting to extract the id value of a node that has been clicked on. I have tried printing out "$event" and examining the PointerEvent object that appea ...

Confirm button title by verifying part of the label that contains a space

I'm facing an issue with clicking a button using the following code: await page.getByRole('button', { name: '3 Employees' }).click(); The problem is that the button's name fluctuates based on the number of employees, causing ...

Determine the type of input and output based on another argument

When working with a function that takes an object of either TypeA or TypeB, the first parameter is used to specify the type of the object and the returned type depends on this first parameter. The issue arises in TypeScript where the type of the object is ...

By implementing a custom function within the router's "redirectTo" method, we can dynamically determine the destination for redirection, effectively avoiding Ahead-of-Time (A

By implementing a function to decide where the user should be directed when the site loads, I encounter the following challenge: { path : '', redirectTo: redirector(), pathMatch: 'full' } The redirector() function returns a rout ...

Leverage the generic types of an extended interface to simplify the creation of a shorthand type

Attempting to streamline my action shorthand that interacts with AsyncActionCreators. A function has been crafted to accept a React dispatch: Dispatch<T> parameter: const fetchProfileAction = actionCreator.async<void, Profile, any>('FETC ...

shifting the angular directives to alternate the bootstrap class of hyperlinks

I have a collection of hyperlinks displayed on my webpage. <a href="#" class="list-group-item list-group-item-action active" routerLink='/route1' >Explore First Link</a> <a href="#" class="list-group-item list-group-item-action" r ...

Tips for integrating Angular Material styles into Sonarque

Can Sonarqube analyze my Angular application prominently using Angular Material? The styling I have is: .some-class { mat-icon { color: red; } } Since Angular Material is globally added through angular.json configuration, So ...

Leveraging the Nest JS Validation Pipe in combination with the class-transformer to retrieve kebab-case query parameters

Can someone help me with using the Nest JS Validation Pipe to automatically transform and validate my GET Request Query Params? For example: {{url}}/path?param-one=value&param-two=value In my app.module.ts, I have included the following code to impl ...

Is it possible to have routing only within child components in Angular 2?

I have set up a main component as the root component <tracker-module></tracker-module> Within the main component, there are sub-components structured like this: <header></header> <left-navigation></left-navigatio ...

What's causing the "* before initialization" error in Vue with TypeScript?

I am encountering an issue with my code where I get the error "Cannot access 'AuthCallback' before initialization" when attempting to call the router function in the AuthCallback component. What could be causing this problem? The desired function ...

When working in VScode, there may be difficulty in locating project-specific imports for `tsx` files. However, the TypeScript compiler is able to locate

When converting a jsx component to tsx, my VScode editor highlights project-specific imports as errors. The following code is from components\molecules\WizardSteps.jsx JSX https://i.stack.imgur.com/tKZ35.png TSX The following code is from comp ...

When ng-test is executed in an Angular service, the function array.some is not found

After retrieving allUsers from the cache and initializing it, I then set the boolean value of specialUserExists based on a condition in allUsers using allUsers.some() (reference to the Array.prototype.some() method). service.ts @Injectable({ providedIn: ...

Developing an Azure pipeline to generate artifacts for an Angular Universal application

I am currently facing an issue with deploying my Angular Universal app to Azure Web App Service. Running npm run build:ssr && npm run serve:ssr locally works perfectly fine. Similarly, running npm run start without ssr rendering also works smoothly ...

The error message "TypeError: text is not a function" is displayed when trying to utilize the text() method from either Blob

My current dilemma revolves around the usage of functions defined in the typescript lib.dom.d.ts file within my node.js express backend that is implemented using TypeScript. Specifically, I am encountering issues with the File/Blob interfaces where a File ...

How do I fix the build error that says "Operator '+' cannot be used with types 'number[]'?

The function below is designed to generate unique uuidv4 strings. function uuidv4() { return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => ( c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)) ...

Encountering issues with deploying an Angular 8 website using a specific configuration

My current project is built on Angular 8, and I am in the process of publishing it locally before deploying it. When running the build step, I specify an environment name called internalprod: src ├───app ├───environments │ environme ...