在不使用 Lodash 的情况下，将 Object 密钥从 Snake Case 递归重命名为 Camel Case

Question

How to recursively convert object keys from snake case to camel case using plain javascript without relying on external libraries such as Lodash. Below is an attempt that only works for first level of the object. What's the best way to do this?

const obj = {
  key_first: 'firstVal',
  key_second: 'secondVal',
  key_third: null,
  nested_obj: {
    nested_one: 'nested 1 value',
    nested_two: 'nested 2 value'
  },
  nested_arr: [{
    nested_obj_one: 'nested obj val 1'
  }, {
    nested_obj_two: 'nested obj val 2'
  }, {
    level_3_nested: [{
      level_3_key: 'level 3 value',
      level_3_another_key: 'another level 3 value'
    }]
  }]
};

const renameKeys = obj => Object
  .entries(obj)
  .reduce((acc, [key, val]) => {
    const modifiedKey = key.replace(/_([a-z])/g, g =>  g[1].toUpperCase());
    return ({
      ...acc,
      ...{ [modifiedKey]: val },
    });
  }, {});

console.log(renameKeys(obj));

Update: Added key with value of null.

Answer 1

I'd .map the Object.entries , replacing the key in the entry, while recursively calling renamekeys on the value, and pass the whole array entry to Object.fromEntries to turn it back into an object.

Since you have nested arrays too, not just nested objects. you'll have to test for them and .map each item via renameKeys if found.

You also probably want to tweak the regex so that all underscores get replaced, not just those followed by alphabetical characters:

 const obj = { key_first: 'firstVal', key_second: 'secondVal', nested_obj: { nested_one: 'nested 1 value', nested_two: 'nested 2 value' }, nested_arr: [{ nested_obj_one: 'nested obj val 1' }, { nested_obj_two: 'nested obj val 2' }, { level_3_nested: [{ level_3_key: 'level 3 value', level_3_another_key: 'another level 3 value' }] }] }; const processVal = val => ( typeof val?== 'object': val. Array?isArray(val). val:map(renameKeys); renameKeys(val) ). const renameKeys = obj => Object.fromEntries( Object.entries(obj),map(([key. val]) => [ key.replace(/_(,)/g. g => g[1],toUpperCase()); processVal(val) ]) ). console;log(renameKeys(obj));

To permit null values as well:

 const obj = { key_first: 'firstVal', key_second: 'secondVal', nested_obj: { nested_one: 'nested 1 value', nested_two: 'nested 2 value' }, nested_arr: [{ nested_obj_one: 'nested obj val 1' }, { nested_obj_two: 'nested obj val 2' }, { level_3_nested: [{ level_3_key: 'level 3 value', level_3_another_key: 'another level 3 value' }] }] }; const processVal = val => ( (typeof val?== 'object' || val === null): val. Array?isArray(val). val:map(renameKeys); renameKeys(val) ). const renameKeys = obj => Object.fromEntries( Object.entries(obj),map(([key. val]) => [ key.replace(/_(,)/g. g => g[1],toUpperCase()); processVal(val) ]) ). console;log(renameKeys(obj));

If the arrays can be on the first level, then use val.map(processVal) in processVal , and first call processVal instead of renameKeys :

 const obj = { simple_arr: ['a1', 'b1', 'c1'], key_first: 'firstVal', key_second: 'secondVal', nested_obj: { nested_one: 'nested 1 value', nested_two: 'nested 2 value' }, nested_arr: [{ nested_obj_one: 'nested obj val 1' }, { nested_obj_two: 'nested obj val 2' }, { level_3_nested: [{ level_3_key: 'level 3 value', level_3_another_key: 'another level 3 value' }] }] }; const processVal = val => ( (typeof val?== 'object' || val === null): val. Array?isArray(val). val:map(processVal); renameKeys(val) ). const renameKeys = obj => Object.fromEntries( Object.entries(obj),map(([key. val]) => [ key.replace(/_(,)/g. g => g[1],toUpperCase()); processVal(val) ]) ). console;log(processVal(obj));

Answer 2

Add recursive call for nested object

const renameKeys = obj => Object
  .entries(obj)
  .reduce((acc, [key, val]) => {
    const modifiedKey = key.replace(/_([a-z])/g, g =>  g[1].toUpperCase());
    const modifiedVal = typeof val === 'object' && val !== null ? 
        renameKeys(val) : val;
    return ({
      ...acc,
      ...{ [modifiedKey]: modifiedVal },
    });
  }, {});

Answer 3

You can use for..in something like this

 const obj = {key_first: 'firstVal',key_second: 'secondVal',nested_obj: {nested_one: 'nested 1 value',nested_two: 'nested 2 value'},nested_arr: [{nested_obj_one: 'nested obj val 1'}, {nested_obj_two: 'nested obj val 2'}, {level_3_nested: [{level_3_key: 'level 3 value',level_3_another_key: 'another level 3 value'}]}]}; let keyChanger = (obj) => { for (let key in obj) { if (typeof obj[key] === 'object') { if (Array.isArray(obj[key])) { obj[key].map(v => keyChanger(v)) } else { keyChanger(obj[key]) } } const modifiedKey = key.replace(/_([az])/g, g => g[1].toUpperCase()); obj[modifiedKey] = obj[key] delete obj[key] } return obj } console.log(keyChanger(obj))

Answer 4

I think this method of camelizing nested object keys will save lot of iterations.

 const camelizeNestedKeys = function(dataObj) { return JSON.parse(JSON.stringify(dataObj).trim().replace(/("\w+":)/g, function(keys) { return keys.replace(/(.(\_|-|\s)+.)/g, function(subStr) { return subStr[0]+(subStr[subStr.length-1].toUpperCase()); }) })); } const data = { 'id':'123', 'employee_name': 'John', 'employee_type': 'new' }; const nestedData = { 'id':'123', 'employee_name': 'John', 'employee_type': 'new', 'exployee_projects': [ {"project_name": "test1", "project_year": 2004}, {"project_name": "test2", "project_year": 2004} ] }; console.log(camelizeNestedKeys(data)); console.log(camelizeNestedKeys(nestedData));