Angular 6: Issues with API Get Method not executing when an integer value is passed with an empty string

I'm experiencing an issue in my angular application when trying to call an API method from angular. The method requires two parameters - one integer value and one string value, which is optional.

Below is the code snippet in Typescript:

let id:number = 5;
let value: string = "";

this.http.get<string[]>(this.appService.baseUrl + 'api/File/' + id + "/" + value)

In the Controller:

[HttpGet("{id:int}/value")]
[ResponseCache(NoStore = true)]
public async Task<IActionResult> Get(int id, string value) { }

The issue arises because the Get method is not being called when the value parameter is empty.

c#angulartypescriptasp.net-coreasp.net-core-webapi

Answer №1

Let's consider your scenario where you are constructing the URL as follows:

/api/File/5

However, your controller is expecting a different format:

/api/File/5/value

If you want the value to be optional and to go into the value parameter (which is of type string), you can modify your HttpGet attribute like this:

[HttpGet("{id:int}/{value?}")]

This change will make the value parameter optional and can hold any value passed in.

Answer №2

My expertise lies mainly in asp.net web api, and from what I understand, having an empty string value can impact the routing process. In your case, because there is no route specified for just an integer parameter, your request may not be reaching the API endpoint. To address this issue, consider overloading your Get method to include a version that specifically accepts only an int value.

Answer №3

The content of the shareType variable in the URL has been identified as empty, while no value has been assigned to the shareValue variable. To resolve this issue, remove the ":number" after the shareType variable and provide a value for the shareValue variable.

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

Selenium encounters difficulty locating an element that is present on the page

class Selection { private IWebDriver driver; private StringBuilder verificationErrors; private string baseURL; private bool acceptNextAlert = true; public Selection( ) { driver = new FirefoxDr ...

c#seleniumselenium-webdriver

Is it possible to set a timeout for Ajax requests using jQuery?

Is there a way in jQuery to set a timeout for post and get methods similar to the global timeouts for ajax start and stop? I am interested in setting up a popup message that appears if an ajax request runs for more than a certain amount of time, indicatin ...

c#.netjqueryasp.net-mvcajax

Routing with the default outlet in Angular

My current challenge involves the user module and setting up a default router outlet. The goal is to display the UserHomeComponent when the path is /user, but for some reason it's not functioning as expected. Interestingly, if I specify a path instead ...

angularpathdefaultrouteroutlet

Collaborate on Typescript Interfaces within a Firebase development environment

I've been developing a Firebase project using Angular for the frontend, and incorporating the @angular/fire library. Within this project, I have created multiple interfaces that utilize firebase and firestore types. For example: export interface ...

angulartypescriptfirebasegoogle-cloud-firestore

FIREBASE_AUTHCHECK_DEBUG: Error - 'self' is undefined in the debug reference

I'm encountering an issue while trying to implement Firebase Appcheck in my Next.js Typescript project. firebase.ts const fbapp = initializeApp(firebaseConfig); if (process.env.NODE_ENV === "development") { // @ts-ignore self.FIREBASE_ ...

typescriptfirebasenext.jsfirebase-app-check

reading an array of objects using typescript

Trying to retrieve an object from an array called pVal. pVal is the array that includes objects. I am attempting to obtain the value of "group" based on the id provided. For instance, if the id is equal to 1, it should display "VKC". Any assistance woul ...

angulartypescript

Tracking property changes in Angular can help developers easily identify modifications to specific

import { Component ,OnInit} from '@angular/core'; import { QuizService } from './quiz.service'; import { timer } from 'rxjs'; import { take, map } from 'rxjs/operators'; @Component({ selector: 'app-r ...

angular

Running complex Firestore query within Cloud Functions

Currently, I am developing triggers that interact with a Firestore movie and user database. The main goal of one trigger is to present a new user with a list of top-rated movies in genres they have selected as their favorites. To achieve this, I store the ...

node.jstypescriptfirebasegoogle-cloud-firestoregoogle-cloud-functions

Typing should be positioned on either side of the declaration

When I define the type MyType, it looks like this: export type MyType = { ID: string, Name?: string }; Now, I have the option to declare a variable named myVar using three slightly different syntaxes: By placing MyType next to the variable ...

javascriptnode.jstypescript

Angular TypeScript test checking file size with Jasmine

Seeking optimal method for testing File size during input type="file" change event. Currently, my test specification appears as follows: it('attach file with too large size', () => { const file: File = { name: 'filename', ...

angularfiletypescriptunit-testingjasmine

Issue: The inject() function must be activated within an injection context, however, the origin cannot be located

While utilizing angularfire's authentication service for user registration and login in my application, I encountered an error when triggering the register or sign-in method: Error: inject() must be called from an injection context Despite attempting ...

angularfirebaseinjectinjectable

Establishing the types of object properties prior to performing a destructuring assignment

Consider a scenario where a function is utilized to return an object with property types that can be inferred or explicitly provided: const myFn = (arg: number) => { return { a: 1 + arg, b: 'b' + arg, c: (() => { ...

javascripttypescripttypescript-types

Obtain the specific generic type that is employed to broaden the scope of a

I am working on a class that involves generics: abstract class Base<P extends SomeType = SomeType> { // ... } In addition, there is a subclass that inherits from it: class A extends Base<SomeTypeA> { // ... } I'm trying to figure out ...

typescript

What steps should I take to convert the lazyload module in routes into a regular module?

Software Version: ng version: @angular/cli: 1.0.0-rc.1 node: 6.10.2 os: win32 x64 @angular/common: 4.1.1 @angular/compiler: 4.1.1 @angular/compiler-cli: 4.1.1 @angular/core: 4.1.1 @angular/forms: 4.1.1 @angular/http: 4.1.1 @angular/platform-browser: 4.1.1 ...

angular

angular ionic does not function

The code below is found in the Angular component of the Ionic app. In .html=> <ion-col *ngFor="let a of article; let i=index" size="4"> <div (click)="openArticle()"> <ion-thumbnail slot=& ...

angularionic-frameworkionic4

Convert stylish row into JSON

Querying Dapper Results I am facing an issue with storing a Dapper Row as a JSON string in our database. Despite several attempts, I have not been successful in achieving this. Let me provide some context on the matter. Project Details In our current pr ...

c#.netjsondapper

Impact of using ngIf in ngAfterViewInit

During the ngAfterViewInit lifecycle hook, I am triggering an event and capturing it in another component using ComponentRef. Everything functions smoothly until I incorporate ngIf in the parent component. What impact does ngIf have on Angular's life ...

angularvisibilityangular-ng-ifangular-lifecycle-hooks

Displaying exclusively the country code in an Angular material-select component

This is the HTML code I am using: <mat-form-field style="width: 70px;margin-left: 50px;"> <mat-label>Select an option</mat-label> <mat-select (openedChange)="toogleCountry()" [(value)]="selected"> <mat-option value="+91" ...

angularangular-material

Using Typescript to overload functions with varying first parameters

I am facing a scenario where I have a parent class that requires a method implementation with either one or two parameters depending on the child class. class MyClass { update(obj: HashMap); update(id: ID, obj: HashMap); update(objOrId: HashM ...

typescript

Mapping JSON data from an array with multiple properties

Here is a JSON object that I have: obj = { "api": "1.0.0", "info": { "title": "Events", "version": "v1", "description": "Set of events" }, "topics": { "cust.created.v1": { "subscribe": { ...

javascriptnode.jsjsontypescriptlodash