I am currently utilizing Angular on the front end and Postgresql as my database management system.
Displayed below are the names of columns in the database that are being accessed by the service:
export interface AmazonDataLog {
customer_id: number;
first_target: string;
last_target: string;
}
Below is the TypeScript file where the processIncomingRecord function will retrieve data and then render it on the user interface:
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);
});
The following HTML code displays the retrieved data:
.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>
I am interested in renaming the backend variables to camel case and displaying them on the frontend:
Eg - The original backend service returns:
customer_id: number;
firstTarget: string;
lastTarget: string;
For example, I would like to display them on the UI as follows:
{{customerID}} {{firstTarget}} and {{lastTarget}}
How can I make this change?