Similar to [JsonPropertyName] in C#, but for TypeScript

Question

Similar to [JsonPropertyName] in C#, but for TypeScript

Need help deserializing JSON response into a class defined in Angular. Let's use the example class below:

export class ChatHubInfo {
  hubUrl: string = undefined!
  accessToken: string = undefined!
}

However, the JSON response is structured differently:

{
   "hub_url": "https://localhost:8080/",
   "access_token": "v4.public.eY..."
}

During deserialization, I need to map hub_url to hubUrl, and so on. In C#, I can easily achieve this using the [JsonPropertyName] attribute, but I'm unsure of the equivalent in Angular.

Is it acceptable to have property names like 'hub_url', etc?

json angular typescript json-deserialization

Answer 1

Answer №1

If you want to convert snake_case to camelCase in a string, you can use the following function:

function snakeToCamel(str: string): string {
    return str.replace(/_([a-z])/g, (_, group1) => group1.toUpperCase());
}

function convertKeysToCamelCase(obj: Record<string, any>): Record<string, any> {
    const result: Record<string, any> = {};

    for (const key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            const camelKey = snakeToCamel(key);
            result[camelKey] = obj[key];
        }
    }

    return result;
}

Alternatively, you can use the 'class-transformer' module for easier conversion:

npm i class-transformer

Then modify your code as shown below:

import { Expose } from "class-transformer"
export class ChatHubInfo {
    @Expose({name: "hub_url"})
    hubUrl: string = undefined!
    
    /*...etc...*/
}

Finally, you can use the plainToClass function from the class-transformer module like this:

import { plainToClass } from "class-transformer"
const chatHubInfo = plainToClass(ChatHubInfo, {
    "hub_url": "https://localhost:8080/",
    "access_token": "v4.public.eY..."
});

Answer 2

If you want to convert snake_case to camelCase in a string, you can use the following function:

function snakeToCamel(str: string): string {
    return str.replace(/_([a-z])/g, (_, group1) => group1.toUpperCase());
}

function convertKeysToCamelCase(obj: Record<string, any>): Record<string, any> {
    const result: Record<string, any> = {};

    for (const key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            const camelKey = snakeToCamel(key);
            result[camelKey] = obj[key];
        }
    }

    return result;
}

Alternatively, you can use the 'class-transformer' module for easier conversion:

npm i class-transformer

Then modify your code as shown below:

import { Expose } from "class-transformer"
export class ChatHubInfo {
    @Expose({name: "hub_url"})
    hubUrl: string = undefined!
    
    /*...etc...*/
}

Finally, you can use the plainToClass function from the class-transformer module like this:

import { plainToClass } from "class-transformer"
const chatHubInfo = plainToClass(ChatHubInfo, {
    "hub_url": "https://localhost:8080/",
    "access_token": "v4.public.eY..."
});

Similar to [JsonPropertyName] in C#, but for TypeScript

Answer №1

Similar questions

Tips for dynamically altering the data type of an object in Angular depending on a certain condition

What is the best way to pass the token received from a post request to a get request using Angular?

Explore the intricacies of RxJS catchError

Retrieve information from a JSON file according to the provided input

Exploring the symfony2 shop's read-only settings

Unable to find solutions for all parameters in AngularFirestoreDocument: (?, ?)

Enhance the Nuxt 3 experience by expanding the functionality of the NuxtApp type with

Setting up Zurb Foundation in a VueJS TypeScript project: Step-by-step guide

Why isn't this Java page displaying the data I need from this Json file?

What is the best method for obtaining user data when additional custom data is stored in Cloud Firestore?

Is it feasible to securely remove an item from an array within an object without the need for any assertions in a single function?

What is the best way to remove a void type from a union type?

Looking for assistance with JSON and jQuery?

How can I process a data retrieval request in a Laravel controller if someone asks for information from my applications?

Error encountered: Could not find the specified file or directory, 'resultsCapturer.js:.will-be-removed-after-cucumber-runs.tmp'

Calculate the total number of seconds from an ISO8601 duration with TypeScript by utilizing the date-fns library

Transmission of JSON to a C# controller via AJAX results in a Count value of zero in .NET 7

The attribute 'sandwiches' cannot be found within the data type 'string'

What is the best way to retrieve a value from a JSON object using AngularJS?

Mastering the use of npm and sails to create HTML-PDF files effortlessly