Angular - How to deal with Backend to Frontend naming convention?

Question

I am using Angular as front end and Postgresql as database.

The interface below are names of columns in database which are being consumed by service

export interface AmazonDataLog {  
    customer_id: number;
    first_target: string;
    last_target: string;
   
}

Below is the ts file where processIncomingRecord function will get data and then render on UI

component.ts file

  firstLogs: AmazonDataLog | undefined = undefined;
 
  constructor(
    public userService: UserService,
    private records: AmmaService,
    private router: Router
  ){

    this.records.getNextRecord().subscribe(data => {
      this.processIncomingRecord(data);
    });

Below is html code where data is being displayed

.html code

 <mat-divider></mat-divider>
 <mat-list-item class="bold">Amazon {{firstLogs.customer_id}} : {{firstLogs.first_target}}</mat-list-item>
 <mat-divider></mat-divider>
 <mat-divider></mat-divider>
 <mat-list-item class="bold">Alexa {{firstLogs.customer_id}} : {{firstLogs.last_target}}</mat-list-item>
 <mat-divider></mat-divider>
            

What I am looking for is to RENAME backend variable to CAMEL CASE and display on frontend

Eg - Backend service returns

    customer_id: number;
    firstTarget: string;
    lastTarget: string;

Eg - On UI I want to display as CAMEL CASE

   {{customerID}} {{firstTarget}} and {{lastTarget}} 

How can I achieve this change?

Answer 1

You cannot rename fields of an object when it is present. You have 2 options here.

1st

Define 3 optional fields in your interface

export interface AmazonDataLog {
    customer_id: number;
    first_target: string;
    last_target: string;
    customerID?: number;
    firstTarget?: string;
    lastTarget?: string;
}

And then you put a method in between where you just map the values.

mapToCamelCase(data: AmazonLogData): void {
    data.customerID = data.customer_id;
    data.firstTarget = data.first_target;
    data.lastTarget = data.last_target;
}

The object gets processed "by reference" so you don't need to return it.

2nd

You build up a second interface with the names in CamelCase and then you do the mapping.

export interface CcAmazonDataLog {
    customerID: number;
    firstTarget: string;
    lastTarget: string;
}


// You can remove the unnecessary fields afterwards, 
// But be sure that you never ever need to access them again later!
// the delete-lines are commented out (just as a precaution)
mapToCamelCase(data: AmazonLogData): CcAmazonLogData  {
   // instantiate an object ccdata using the interface CcAmazonLogData
   // [...]

    ccdata.customerID = data.customer_id;
    // delete data.customer_id;
    ccdata.firstTarget = data.first_target;
    // delete data.first_target;
    ccdata.lastTarget = data.last_target;
    // delete data.last_target;

    return ccdata;
}

And then do something like this

TS-File

this.records.getNextRecord().subscribe(data => {
    this.mapToCamelCase(data);
    this.processIncomingRecord(data);
});

HTML

 <mat-divider></mat-divider>
 <mat-list-item class="bold">Amazon {{firstLogs?.customerID}} : {{firstLogs?.firstTarget}}</mat-list-item>
 <mat-divider></mat-divider>
 <mat-divider></mat-divider>
 <mat-list-item class="bold">Alexa {{firstLogs?.customerID}} : {{firstLogs?.lastTarget}}</mat-list-item>
 <mat-divider></mat-divider>