将返回的 JSON 对象属性转换为(第一个较低的) camelCase

小开

Well I took up the challenge and think I figured it out:

var firstToLower = function(str) {
return str.charAt(0).toLowerCase() + str.slice(1);
};


var firstToUpper = function(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
};


var mapToJsObject = function(o) {
var r = {};
$.map(o, function(item, index) {
r[firstToLower(index)] = o[index];
});
return r;
};


var mapFromJsObject = function(o) {
var r = {};
$.map(o, function(item, index) {
r[firstToUpper(index)] = o[index];
});
return r;
};




// Map to
var contacts = [
{
GivenName: "Matt",
FamilyName: "Berry"
},
{
GivenName: "Josh",
FamilyName: "Berry"
},
{
GivenName: "Thomas",
FamilyName: "Berry"
}
];


var mappedContacts = [];


$.map(contacts, function(item) {
var m = mapToJsObject(item);
mappedContacts.push(m);
});


alert(mappedContacts[0].givenName);




// Map from
var unmappedContacts = [];


$.map(mappedContacts, function(item) {
var m = mapFromJsObject(item);
unmappedContacts.push(m);
});


alert(unmappedContacts[0].GivenName);

Property converter (jsfiddle)

The trick is handling the objects as arrays of object properties.

小开

I needed a generic method that accepted an array or object. This is what I'm using (I borrowed KyorCode's firstToLower() implementation):

function convertKeysToCamelCase(obj) {
if (!obj || typeof obj !== "object") return null;


if (obj instanceof Array) {
return $.map(obj, function(value) {
return convertKeysToCamelCase(value);
});
}


var newObj = {};
$.each(obj, function(key, value) {
key = key.charAt(0).toLowerCase() + key.slice(1);
if (typeof value == "object" && !(value instanceof Array)) {
value = convertKeysToCamelCase(value);
}
newObj[key] = value;
});


return newObj;
};

Example calls:

var contact = { GivenName: "Matt", FamilyName:"Berry" };


console.log(convertKeysToCamelCase(contact));
// logs: Object { givenName="Matt", familyName="Berry"}


console.log(convertKeysToCamelCase([contact]));
// logs: [Object { givenName="Matt", familyName="Berry"}]


console.log(convertKeysToCamelCase("string"));
// logs: null


console.log(contact);
// logs: Object { GivenName="Matt", FamilyName="Berry"}

小开

最佳答案

Here's a reliable, recursive function that will properly camelCase all of a JavaScript object's properties:

function toCamel(o) {
var newO, origKey, newKey, value
if (o instanceof Array) {
return o.map(function(value) {
if (typeof value === "object") {
value = toCamel(value)
}
return value
})
} else {
newO = {}
for (origKey in o) {
if (o.hasOwnProperty(origKey)) {
newKey = (origKey.charAt(0).toLowerCase() + origKey.slice(1) || origKey).toString()
value = o[origKey]
if (value instanceof Array || (value !== null && value.constructor === Object)) {
value = toCamel(value)
}
newO[newKey] = value
}
}
}
return newO
}

Test:

var obj = {
'FirstName': 'John',
'LastName': 'Smith',
'BirthDate': new Date(),
'ArrayTest': ['one', 'TWO', 3],
'ThisKey': {
'This-Sub-Key': 42
}
}


console.log(JSON.stringify(toCamel(obj)))

Output:

{
"firstName":"John",
"lastName":"Smith",
"birthDate":"2017-02-13T19:02:09.708Z",
"arrayTest": [
"one",
"TWO",
3
],
"thisKey":{
"this-Sub-Key":42
}
}

小开

If you would use lodash instead of underscore, this would do:

_.mapKeys(obj, (v, k) => _.camelCase(k))

This would convert both TitleCase and snake_case to camelCase. Note that it is not recursive though.

小开

To change a plain object's keys from snake_case to camelCase recursively try the following
(which uses Lodash):

function objectKeysToCamelCase(snake_case_object) {
var camelCaseObject = {};
_.forEach(
snake_case_object,
function(value, key) {
if (_.isPlainObject(value) || _.isArray(value)) {     // checks that a value is a plain object or an array - for recursive key conversion
value = objectKeysToCamelCase(value);               // recursively update keys of any values that are also objects
}
camelCaseObject[_.camelCase(key)] = value;
}
)
return camelCaseObject;
};

test in this PLUNKER

Note: also works recursively for objects within arrays

小开

This solution based on the plain js solution above, uses loadash and Keeps an array if passed as a parameter and Only change the Keys

function camelCaseObject(o) {
let newO, origKey, value
if (o instanceof Array) {
newO = []
for (origKey in o) {
value = o[origKey]
if (typeof value === 'object') {
value = camelCaseObject(value)
}
newO.push(value)
}
} else {
newO = {}
for (origKey in o) {
if (o.hasOwnProperty(origKey)) {
newO[_.camelCase(origKey)] = o[origKey]
}
}
}
return newO
}


// Example
const obj = [
{'my_key': 'value'},
{'Another_Key':'anotherValue'},
{'array_key':
[{'me_too':2}]
}
]
console.log(camelCaseObject(obj))

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>

小开

Updated code using the reference from https://plnkr.co/edit/jtsRo9yU12geH7fkQ0WL?p=preview This handles the Objects with array with objects inside it too and so on, by keeping arrays as arrays (which you can iterate over using map)

function snakeToCamelCase(snake_case_object){
var camelCaseObject;
if (isPlainObject(snake_case_object)) {
camelCaseObject = {};
}else if(isArray(snake_case_object)){
camelCaseObject = [];
}
forEach(
snake_case_object,
function(value, key) {
if (isPlainObject(value) || isArray(value)) {
value = snakeToCamelCase(value);
}
if (isPlainObject(camelCaseObject)) {
camelCaseObject[camelCase(key)] = value;
}else if(isArray(camelCaseObject)){
camelCaseObject.push(value);
}
}
)
return camelCaseObject;
}

小开

Using lodash and ES6, this will replace all keys recursively to camelcase:

const camelCaseKeys = (obj) => {
if (!_.isObject(obj)) {
return obj;
} else if (_.isArray(obj)) {
return obj.map((v) => camelCaseKeys(v));
}
return _.reduce(obj, (r, v, k) => {
return {
...r,
[_.camelCase(k)]: camelCaseKeys(v)
};
}, {});
};

小开

This is a great use case for axios interceptors

Basically, define a client class and attach a before/after interceptor that converts the request/response data.

export default class Client {
get(url, data, successCB, catchCB) {
return this._perform('get', url, data, successCB, catchCB);
}


post(url, data, successCB, catchCB) {
return this._perform('post', url, data, successCB, catchCB);
}


_perform(method, url, data, successCB, catchCB) {
// https://github.com/axios/axios#interceptors
// Add a response interceptor
axios.interceptors.response.use((response) => {
response.data = toCamelCase(response.data);
return response;
}, (error) => {
error.data = toCamelCase(error.data);
return Promise.reject(error);
});


// Add a request interceptor
axios.interceptors.request.use((config) => {
config.data = toSnakeCase(config.data);
return config;
}, (error) => {
return Promise.reject(error);
});


return axios({
method: method,
url: API_URL + url,
data: data,
headers: {
'Content-Type': 'application/json',
},
}).then(successCB).catch(catchCB)
}
}

Here's a gist with a longer example using React/axios.

小开

Took the challenge with lodash and some es6+ features Here is my implementation with the reduce function.

function deeplyToCamelCase(obj) {
return _.reduce(obj, (camelCaseObj, value, key) => {
const convertedDeepValue = _.isPlainObject(value) || _.isArray(value)
? deeplyToCamelCase(value)
: value;
return { ...camelCaseObj, [_.camelCase(key)] : convertedDeepValue };
}, {});
};

小开

This is my take; more readable and with less nesting than brandoncode's implementation, and with more room for handling edge cases like Date (which isn't handled, by the way) or null:

function convertPropertiesToCamelCase(instance) {
if (instance instanceof Array) {
var result = [];


for (var i = 0; i < instance.length; i++) {
result[i] = convertPropertiesToCamelCase(instance[i]);
}


return result;
}


if (typeof instance != 'object') {
return instance;
}


var result = {};


for (var key in instance) {
if (!instance.hasOwnProperty(key)) {
continue;
}


result[key.charAt(0).toLowerCase() + key.substring(1)] = convertPropertiesToCamelCase(instance[key]);
}


return result;
}

小开

Using lodash, you can do it like this:

export const toCamelCase = obj => {
return _.reduce(obj, (result, value, key) => {
const finalValue = _.isPlainObject(value) || _.isArray(value) ? toCamelCase(value) : value;
return { ...result, [_.camelCase(key)]: finalValue };
}, {});
};

小开

You can do this with this recursive function (with lodash and ES6):

import { camelCase } from 'lodash';


const camelizeKeys = (obj) => {
if (Array.isArray(obj)) {
return obj.map(v => camelizeKeys(v));
} else if (obj != null && obj.constructor === Object) {
return Object.keys(obj).reduce(
(result, key) => ({
...result,
[camelCase(key)]: camelizeKeys(obj[key]),
}),
{},
);
}
return obj;
};

Test:

const obj = {
'FirstName': 'John',
'LastName': 'Smith',
'BirthDate': new Date(),
'ArrayTest': ['one', 'TWO', 3],
'ThisKey': {
'This-Sub-Key': 42
}
}


console.log(JSON.stringify(camelizeKeys(obj)))

Output:

{
"firstName": "John",
"lastName": "Smith",
"birthDate": "2018-05-31T09:03:57.844Z",
"arrayTest":[
"one",
"TWO",
3
],
"thisKey":{
"thisSubKey": 42
}
}

小开

Here's handy library you might wanna try: https://www.npmjs.com/package/camelize2

You simply need to install it with npm install --save camelize2 and then

const camelize = require('camelize2')


const response = {
Contacts: [{ GivenName: "Matt", FamilyName:"Berry" }]
}


const camelizedResponse = camelize(response)

小开

Building on goredwards answer (which didn't handle the array fields correctly)

function objectKeysToCamelCase(snake_case_object) {
let camelCaseObject = {}
_.forEach(
snake_case_object,
function(value, key) {
if (_.isPlainObject(value)) {
value = objectKeysToCamelCase(value)
} else if (_.isArray(value)) {
value = value.map(v => _.isPlainObject(v) ? objectKeysToCamelCase(v) : v)
}
camelCaseObject[_.camelCase(key)] = value
},
)
return camelCaseObject
}

小开

Convert object keys to camelCase with deep.

import _ from 'lodash';


export function objectKeysToCamelCase(entity) {
if (!_.isObject(entity)) return entity;


let result;


result = _.mapKeys(entity, (value, key) => _.camelCase(key));
result = _.mapValues(result, (value) => objectKeysToCamelCase(value));


return result;
}

小开

there's a nice npm module for this.. https://www.npmjs.com/package/camelcase-keys

npm install camelcase-keys

const camelcaseKeys = require( "camelcase-keys" );


camelcaseKeys( { Contacts: [ { GivenName: "Matt", FamilyName: "Berry" } ] }, { deep: true } );

will return...

{ contacts: [ { givenName: "Matt", familyName: "Berry" } ] }

小开

Use lodash ...

function isPrimitive (variable) {
return Object(variable) !== variable
}


function toCamel (variable) {
if (isPrimitive(variable)) {
return variable
}


if (_.isArray(variable)) {
return variable.map(el => toCamel(el))
}


const newObj = {}
_.forOwn(variable, (value, key) => newObj[_.camelCase(key)] = toCamel(value))


return newObj
}

小开

Just use humps

humps.camelize('hello_world');
humps.camelizeKeys(object, options); // will work through entire object

https://www.npmjs.com/package/humps

小开

here is code I found for it, not fully tested though, but worth sharing. It is far more readable than other answers, not sure about performance.

test it http://jsfiddle.net/ms734bqn/1/

const toCamel = (s) => {
return s.replace(/([-_][a-z])/ig, ($1) => {
return $1.toUpperCase()
.replace('-', '')
.replace('_', '');
});
};


const isArray = function (a) {
return Array.isArray(a);
};


const isObject = function (o) {
return o === Object(o) && !isArray(o) && typeof o !== 'function';
};


const keysToCamel = function (o) {
if (isObject(o)) {
const n = {};


Object.keys(o)
.forEach((k) => {
n[toCamel(k)] = keysToCamel(o[k]);
});


return n;
} else if (isArray(o)) {
return o.map((i) => {
return keysToCamel(i);
});
}


return o;
};

小开

Solution similar to @brandonscript, but in more ES6-functional way:

const camelCaseString = str => (
(str.charAt(0).toLowerCase() + str.slice(1) || str).toString()
);


const objectToCamelCase = val => {
if (typeof val != 'object' || val === null) {
return val;
}
 

if (val instanceof Array) {
return val.map(objectToCamelCase);
}
 

return Object.keys(val)
.filter(prop => val.hasOwnProperty(prop))
.map(prop => ({[camelCaseString(prop)]: objectToCamelCase(val[prop])}))
.reduce((prev, current) => ({...prev, ...current}))
};


// Example:
let converted = objectToCamelCase({UserId: 1, Hobbies: [{Id: 1, Label: "Read"}], Name: "John Doe"});


console.log(converted)

小开

Pure JavaScript, shoud work fine

function convertKeysToCamelCase(object) {
if(object === undefined || object === null || typeof object !== "object") {
return object;
} else {
if(Array.isArray(object)) {
return object.map(item => convertKeysToCamelCase(item));
} else {
return Object.entries(object).reduce((result, [key, value]) => {
result[key.charAt(0).toLowerCase() + key.slice(1)] = convertKeysToCamelCase(value);
return result;
}, {});
}
}
}

小开

you can do this simply by using json-case-convertor

const jcc = require('json-case-convertor')
const jsonData = ''//you json data to convert
const camelCasedJson = jcc.camelCaseKeys(jsonData) //Convert all the keys of object to snake case

This will handle all cascaded object as well