configure the text label in angularjs - html

Question

I want to configure the text label user friendly. eg http response be like
[
{
"approved_datetimestamp": "",
"approved_by": "",
"effective_datetimestamp": "",
"act_datetimestamp": "",
"expiry_datetimestamp": "",
"rejected_datetimestamp": "",
"rejected_by": ""
}
]
Here, the key is a label, I want to configure that key. E.g. approved_datetimestamp would be Approved Datetimestamp.
I have approach that we can create constant variable like
const approved_datetimestamp = "Approved Datetimestamp";
when we displaying in template, I am using:
<div class="col-sm-6">{{row[rcolumn] | uppercase}}</div>
or else
capitalise first letter of each word and replace underscore with a space. am expacting this

Answer 1

You are thinking about creating dynamic keys
You need to create a key with some filter (I got the code from LazioTibijczyk), then simply pass it into an object to assign it. It will create that new key dynamically. Here is a demo of it:
var object = {
"approved_datetimestamp": "",
"approved_by": "",
"effective_datetimestamp": "",
"act_datetimestamp": "",
"expiry_datetimestamp": "",
"rejected_datetimestamp": "",
"rejected_by": ""
};
var new_object = {};
for (var property in object) {
var new_key = property.toLowerCase()
.split('_')
.map((s) => s.charAt(0).toUpperCase() + s.substring(1))
.join(' ');
new_object[new_key] = "";
}
console.log(new_object);

Answer 2

Here it is, iterate through object properties, split them on underscore and capitalise each word, then assign it to the property.
var object = {
"approved_datetimestamp": "jsjs",
"approved_by": "",
"effective_datetimestamp": "",
"act_datetimestamp": "",
"expiry_datetimestamp": "",
"rejected_datetimestamp": "",
"rejected_by": ""
};
for(var property in object) {
var newProperty = property.toLowerCase()
.split('_')
.map((s) => s.charAt(0).toUpperCase() + s.substring(1))
.join(' ');
object[newProperty] = object[property];
delete object[property];
}
console.log(object);