Angular / Typescript converting from snake case to camel case in interfaces

Question

We are currently doing a mass upgrade from AngularJS to Angular. We've encountered a problem that i cannot find what is the best solution in order to solve it .

According to Angular/Typescript code standards, we should define all our variables, property names, and interfaces using camelCase.

The problem is that all the data that comes from the backend is used with snake_case.

So after each request, in order to create the according interface, we need to transform the keys to camelCase and then when we pass the data we need to snake_case it back.

we are using lodash to do so, but is there a better way doing so? Is there a way to convert those things using Typescript native implementation?

Answer 1

The problem is the same as mine.

But I create common utils and resolve below,

Step 1: Create a function toCamel & keysToCamel

toCamel(s: string) {
    return s.replace(/([-_][a-z])/ig, ($1) => {
        return $1.toUpperCase()
            .replace('-', '')
            .replace('_', '');
    });
}

keysToCamel(o: any) {
    if (o === Object(o) && !Array.isArray(o) && typeof o !== 'function') {
        const n = {};
        Object.keys(o)
            .forEach((k) => {
                n[this.toCamel(k)] = this.keysToCamel(o[k]);
            });
        return n;
    } else if (Array.isArray(o)) {
        return o.map((i) => {
            return this.keysToCamel(i);
        });
    }
    return o;
}

Step 2: When JSON Data response from Backend.

Example:

JSON (response from backend)

{"user_id":"2014","full_name":"bamossza","token":"jwt","lang_id":"TH"}

Interface

export interface Profile {
    userId: number;
    fullName: string;
    token: string;
    langId: string;
}

convert and mapping to interface

this.profileService.callProfile(s.token)
    .subscribe((response: Profile) => {
        const profile = this.commonUtil.keysToCamel(response) as Profile;
        console.log(profile.fullName); // bamossza
        console.log(profile.langId); // TH
        ...
    });

Work for me.

Q: Why you do not convert until backend ???

A: Because I feel that JSON "calmelCase" is harder to read than "snake_case".

Try to apply the application to your project.