There appears to be an issue with Axios incorrectly parsing TypeScript objects

I have a TypeScript object representing a user, with an id: number. However, when this id is passed through axios, it is being parsed as a string internally which is causing issues with my server. I need to correct this issue.

The axios call I am making looks like this : axios.post(${url}

, user, { withCredentials: true });
and the User object is defined as follows :

export default class User {
    Id: number;

    Username: string;

    Password: string;

    constructor(Id: number, Username: string, Password: string) {
      this.Id = Id;
      this.Username = Username;
      this.Password = Password;
    }
}

After parsing, the object looks like this :

       "{"Id":"1337","Username":"test","Password":"admin"}"

The expected output should be in this format :

"{"Id":1337,"Username":"test","Password":"admin"}"

My initial solution was to manually build the JSON object and use stringify, but since axios also uses stringify internally, this approach did not work as intended.

Answer №1

The issue did not stem from axios. I mistakenly took a value from a <select> tag and directly assigned it to my Id property. The problem arose because the value was a string, while my id property was also a string. Converting the value to a number during initialization resolved the issue: Number(this.updatedUserId).

For more information on this topic, visit: Incorrect result in JavaScript calculation

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

Exploring Angular Component Communication: Deciphering between @Input, @Output, and SharedService. How to Choose?

https://i.stack.imgur.com/9b3zf.pngScenario: When a node on the tree is clicked, the data contained in that node is displayed on the right. In my situation, the node represents a folder and the data consists of the devices within that folder. The node com ...

Error: Conversion of "2018-01-01-12:12:12:123456" to a date is not possible for the 'DatePipe' filter

<td>{{suite.testSuiteAttributes && suite.testSuiteAttributes.modifiedTimestamp | date: 'yyyy-MM-dd' }} </td> I am trying to display the date in the "05-Feb-2018 11:00:00 PM CST" CST format, but I keep getting an ...

find the element in cypress with multiple child elements

Looking for a way to target the first HTML element that contains more than 2 children. Another option is to access the children elements of the first parent element. <div class="market-template-2-columns"> <button type="button&q ...

Dynamically change or reassign object types in TypeScript

Check out the example you can copy and test in TypeScript Playground: class GreetMessage { message: {}; constructor(msg: string) { let newTyping: { textMsg: string }; // reassign necessary this.message = newTyping; this.message.textMsg = msg; ...

Deciphering a PHP json_encode response using JavaScript

Consider this scenario where I am using json_encoding for my array and displaying it: $key = $this->key; $sql = "SELECT * FROM Requests"; $result = $this->db->query($sql); ...

Enforcement of Class Initialization in Typescript 2.7

After initializing a sample project using the Angular template in Visual Studio 2017, I made sure to update the package.json file with the latest module versions. However, upon executing the npm install command and navigating to the site, an error related ...

Determining which index in a multi-dimensional array in Ajax JSON contains specific values

In my project, I am using PHP to return a JSON multi-array via JQuery Ajax. My goal is to identify which array contains a specific value so that I can access the values within that array. This process needs to be repeated for up to three arrays that are be ...

Count of jSon objects

After receiving a string st from a web service, I convert it into an object. How can I determine the number of arrays inside this object? In this particular case, there are 2 arrays. var st = "{[{"Name": "fake", "Address": "add"]},[{"Name": "fake", "Addre ...

Testing a function that utilizes Nitro's useStorage functionality involves creating mock data to simulate the storage behavior

I have developed a custom function for caching management, specifically for storing responses from API calls. export const cache = async (key: string, callback: Function) => { const cacheKey = `cache:${key}`; const data = await useStorage().get ...

Troubleshooting TypeScript Modules in Visual Studio 2015 Update 2: Fixing the 'require' Undefined Error

While working in Visual Studio 2015 Enterprise with Update 2 installed, I decided to create a new TypeScript project called TypeScriptHTMLApp1 using the default template and settings. As part of this project, I added a new TypeScript file named log.ts and ...

Deploy an Angular front-end application with json-server on Cloud9

After completing an Angular course on Coursera, I decided to deploy my course project app on Cloud9. However, I encountered an issue with the back-end since the app retrieves data from a simple db.json file via json-server running on localhost:3000 on my c ...

Tips on integrating library project into angular

I've been encountering a challenge with angular library projects lately. I'm trying to style a project using a global stylesheet while ensuring that the styles only affect the specific project itself. My attempted solution was to create a compone ...

Utilize the npm module directly in your codebase

I am seeking guidance on how to import the source code from vue-form-generator in order to make some modifications. As a newcomer to Node and Javascript, I am feeling quite lost. Can someone assist me with the necessary steps? Since my Vue project utilize ...

Implementing a onClick event to change the color of individual icons in a group using Angular

I have integrated 6 icons into my Angular application. When a user clicks on an icon, I want the color of that specific icon to change from gray to red. Additionally, when another icon is clicked, the previously selected icon should revert back to gray whi ...

Experiencing momentary freezing on Android AVD screen when retrieving JSON data for login functionality

For my application, I've implemented a log-in screen that utilizes JSON to validate the username/password. After successful verification, the user is taken to the main menu. To prevent confusion during the 10-15 seconds it takes to log in, I included ...

Simplest way to extract extensive amounts of data from SQL Server using C#

I am currently facing a dilemma with my C# DLL that I developed and registered in a SQL Server database housing sales and customer data. At this point, I find myself at a standstill. The DLL initiates a call to a distant server to retrieve a token, which ...

Utilizing JSONP in the perfect combination of Jquery version 1.9 and Jersey version 2.5

I've searched extensively without finding a solution that meets my requirements. While I came across some similar threads here, here, and here, none of them resolved my issue or I failed to comprehend the solutions provided. Additionally, I have revie ...

Property of object (TS) cannot be accessed

My question relates to a piece of TypeScript code Here is the code snippet: export function load_form_actions() { $('#step_2_form').on('ajax:before', function(data) { $('#step_2_submit_btn').hide(); $(&ap ...

How can I access the results returned by Firebase functions?

My attempt to retrieve json data from a firebase function request is not working as expected. Here's the code I have tried: export const listener = functions.https.onRequest(async (req, res) => { return {foo:"bar"} }) When I access the approp ...

The element 'imgAreaSelect' does not appear to be valid in this context

I came across an example, but it is not specifically for Angular. I attempted to create a project in angular 6 involving image area selection, but encountered the following error: .component.ts(64,16): error TS2339: Property 'imgAreaSelect' do ...