Change the class properties to UpperCamelCase

I am facing a challenge with attributes in my TypeScript class that are written in camelCase format. The instance of this class needs to be used in an HTTP request body for a web service that has its backend written in C#. However, the backend is trying to access the attributes using UpperCamelCase notation.

What can I do to convert the attributes of my class from camelCase to UpperCamelCase when sending it in an HTTP request?

For example:

class Test1:

httpClient: CustomHttpClient;

public attributeOne;
public attributeTwo;

constructor(att1,att2):{
this.attributeOne = att1;
this.attributeTwo = att2;
this.httpClient = new CustomHttpClient();

}

sendRequest(){
const test = new Test1();
this.httpClient.post(url, test , null);
}

The web service will attempt to access the body as follows:

test.AttributeOne
test.AttributeTwo;

This will result in an error since such attributes do not exist.

I prefer not to change my attributes in TypeScript to UpperCamelCase due to linting reasons, etc.. How can I solve this dilemma?

Answer №1

One way to customize the attribute names in the request body is by using HttpParams. Here's an example:

const params = new HttpParams()
   .set('customParam1', "value1")
   .set('customParam2',"value2");

const body=JSON.stringify(data);

return this.http.post<Person>(this.baseURL + 'endpoint', body,{'headers':headers, 'params': params})

Referenced from:

Answer №2

Here’s how I achieved it:

Firstly, I downloaded an npm module named 'camelcase-keys' ( npm install camelcase-keys)

Then, I provided my object as an argument like so:

const result = camelcaseKeys(JSON.parse(JSON.stringify(dataObject)), { deep: true, pascalCase: true });

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

angular typescript does not support receiving a value in foreach loop

It seems that I'm facing an issue with retrieving the element value inside a typescript foreach loop. constructor(db: AngularFireDatabase) { } this.fbUserData = this.db.list('users/'+this.userid).valueChanges() this.fbUserData.forEa ...

Tips for managing Signal inputs with the updated control flow for conditional rendering in Angular version 17.2

I'm having trouble navigating the control flow and a Signal Input in Angular 17.2. In one of my components, I have this input: index = input<number|null>(); The template for this component needs to account for the fact that index can also be 0 ...

Troubleshooting Problem with C# Class Inheritance

In order to keep this project small and lean, I've opted not to use a masterpage. Instead, I want to add a class in a simple cs file and apply it on the same page. // <copyright file="anon.cs" company="Anonymous"> // ; // </copyright> ...

Struggling with implementing Angular and TypeScript in this particular method

I'm dealing with a code snippet that looks like this: myMethod(data: any, layerId: string, dataSubstrings): void { someObject.on('click', function(e) { this.api.getSomething(a).subscribe((result: any) => { // ERROR CALL 1. It ...

TypeScript struggling to recognize specified types when using a type that encompasses various types

I have a defined type structure that looks like this: export type MediaProps = ImageMediaProps | OembedProps; Following that, the types it references are defined as shown below: type SharedMediaProps = { /** Type of media */ type: "image" | "oembed"; ...

How do @material-ui/core and @types/material-ui interact with each other?

Exploring a sample project that utilizes material-ui. Upon inspecting the package.json file, I noticed the inclusion of the following packages: { ... "dependencies": { "@material-ui/core": "^1.4.1", ... }, "devDependencies": { "@types ...

Certain Material-UI components appear to lack proper styling

I found a tutorial on how to incorporate material UI into my app at this link: https://mui.com/material-ui/getting-started However, I noticed that some components are not styled as expected and customizing the theme seems to have no effect... This is how ...

Ways to resolve the following C# problem: No match found for the specified testcase filter `FullyQualifiedName =`

As someone who is new to C# and Selenium, I have created several scripts successfully. However, I am encountering an issue when I try to create multiple methods or classes. Each time I stick to just one method or class, everything runs smoothly. I have sc ...

What is the process for defining an object with a React component as one property and its corresponding props as another property?

Imagine I have an object structured like this: { Component, //<--- the component props, //<--- the props of the component } I want to create a type for this object that can accept a component and automatically infer the type of its props as the ...

The AngularJs script is encountering issues post-deployment, throwing an error [$injector:unpr]

I have been working on a web project and every time I try to publish it, I want to make sure it looks the same as it does on localhost. Recently, I added angularjs to handle currency display and when I deployed the project again, users are seeing {{currenc ...

How can screenshots be captured with Selenium without the need to launch the browser?

When attempting to capture a screenshot of a webpage using Selenium, I discovered that the process requires opening the web browser. I initially tried changing webDriver.Navigate().GoToUrl("http://www.google.com"); to webDriver.Url = "http://www.google. ...

How does using LINQ compare to working with a list of strings?

I am dealing with 3 different lists ListMaster contains {1,2,3,4,....} - it is populated from a database List1 contains {1,3,4} List2 contains {1,3,95} What is the best way to determine which items in the lists are also present in the master list using L ...

Obtain the input value from a modal and receive an empty string if no value

Utilizing ng-multiselect-dropdown within my bootstrap modal allows users to choose multiple products. Each time an item is selected (onItemSelect), a new div is inserted using the jQuery method insertAfter(). This new div displays the quantity of the selec ...

SonarLint versus SonarTS: A Comparison of Code Quality Tools

I'm feeling pretty lost when it comes to understanding the difference between SonarLint and SonarTS. I've been using SonarLint in Visual Studio, but now my client wants me to switch to the SonarTS plugin. SonarLint is for analyzing overall pr ...

Converting JSON to Objects while changing Keys: A Step-by-Step Guide

"Result": { "AKJB0000001": { "BANK": "AKOLA JANATA COMMERCIAL COOPERATIVE BANK", "IFSC": "AKJB0000001", "BRANCH": "RTGS-HO", "ADDRESS": "JANVAIBHAV,OLD COTTON MARKET,AKOLA,PIN 444001", "CONTACT": null, " ...

What is causing the error "has no properties in common with" in this wrapped styled-component?

When looking at the following code, Typescript is flagging an error on <HeaderInner>: [ts] Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & Pick & Partial>, "className"> & ...

Is it possible to execute methods in the initialization phase using Express Route?

My express app has a simple structure, with the main file app.ts configured like this import * as express from "express"; const application: express.Application = express(); application.get("/", function( request: express.Request, ...

What is the significance of the code statement in the Angular ng2-table package?

Could you please explain the functionality of this specific code line? this.rows = page && config.paging ? this.changePage(page, sortedData) : sortedData; ...

Troubles with applying Global Themes in StyledComponents for React Native

Problem with Global Theme in StyledComponents (React Native) When attempting to utilize a color from my global theme in my component and setting it like so: background-color: ${({theme}) => theme.} The properties within theme, such as colors, font-siz ...

Exceed the capacity of a React component

Imagine having a React component that can render either a <button>, an <a>, or a React Router <Link> based on different props passed to it. Is it possible to overload this component in order to accept the correct props for each scenario? ...