Capitalizing keys of each element in an object in Vuejs

Question

I have this object:

{
'application': "BP 9ALT 8 123",
 'address': "935 HAMPTON CRES",
 'unit': null,
 'status': "COMPLETED -ALL INSP SIGNED OFF"
}

I want to make each key capitalized like:

{
 'Application': "BP 9ALT 8 123",
 'Address': "935 HAMPTON CRES",
 'Unit': null,
 'Status': "COMPLETED -ALL INSP SIGNED OFF"
}

What's an easy way to do it in Vuejs?

if you're outputting it into HTML, then filters (https://vuejs.org/v2/guide/filters.html), if you want to just capitalize the keys in the object, then just for loop the keys and return a new object — A. L, Jul 14 '20 at 04:22
Just to add a link, in case you don't know how to implement the second option suggested by @A.L: https://stackoverflow.com/questions/1026069/how-do-i-make-the-first-letter-of-a-string-uppercase-in-javascript — Bruno Monteiro, Jul 14 '20 at 04:27

Mario · Accepted Answer · 2020-07-14T04:35:23.947

3

Try this solution

const object = {
  application: "BP 9ALT 8 123",
  address: "935 HAMPTON CRES",
  unit: null,
  status: "COMPLETED -ALL INSP SIGNED OFF",
};

const output = Object.entries(object).map(([key, value]) => [
  key[0].toUpperCase() + key.slice(1),
  value,
]);

console.log(Object.fromEntries(output));

See

edited Jul 14 '20 at 04:35

answered Jul 14 '20 at 04:28

Mario

4,784
3
34
50

1

***On side note:-*** No need of splitting and joining you can simply do key.slice(1) – Code Maniac Jul 14 '20 at 04:31
Thanks Code Maniac. Iterator. And no need of `join` – Mario Jul 14 '20 at 04:32
only thing is it won't do nested objects, not that the OP specified it, but you'd kind of expect it from a capitalizer of keys function – Keith Nicholas Jul 14 '20 at 05:03

Sivakumar Tadisetti · Answer 2 · 2020-07-14T04:55:41.037

2

Use Array.reduce() and String.toUpperCase() like below

var obj = {
 'application': "BP 9ALT 8 123",
 'address': "935 HAMPTON CRES",
 'unit': null,
 'status': "COMPLETED -ALL INSP SIGNED OFF"
}

var resultOne = Object.entries(obj).reduce(function(acc, value) {
  acc[value[0].charAt(0).toUpperCase() + value[0].slice(1)] = value[1];
  return acc;
}, {});

// Updated

// In the reduce anonymous function, instead of value you can place [key, value]. So there will be no indexing
var resultTwo= Object.entries(obj).reduce(function(acc, [key, value]) {
  acc[key[0].toUpperCase() + key.slice(1)] = value;
  return acc;
}, {});



console.log(resultOne);
console.log(resultTwo);

edited Jul 14 '20 at 04:55

answered Jul 14 '20 at 04:30

Sivakumar Tadisetti

4,865
7
34
56

1

***On side note:-*** Op wants only first character of key to be uppercased, your solution make whole key uppercased – Code Maniac Jul 14 '20 at 04:32
1

@CodeManiac yes my mistake, updating it ;). Thanks for pointing it out – Sivakumar Tadisetti Jul 14 '20 at 04:33

Capitalizing keys of each element in an object in Vuejs

2 Answers2