반환된 JSON 개체 속성을 (작은 첫 번째) camel Case로 변환합니다.

반환된 JSON 개체 속성을 (작은 첫 번째) camel Case로 변환합니다.

API에서 다음과 같이 JSON이 반환되었습니다.

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

코드 스타일(camel Case - 소문자 첫 글자)과 일관성을 유지하기 위해 어레이를 변환하여 다음을 생성합니다.

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

이를 위한 가장 쉬운/최적의 방법은 무엇입니까?새 연락처 개체를 만들고 반환된 배열의 모든 연락처에 대해 반복하시겠습니까?

var jsonContacts = json["Contacts"],
    contacts= [];
        
_.each(jsonContacts , function(item){
    var contact = new Contact( item.GivenName, item.FamilyName );
    contacts.push(contact);
});

아니면 원래 어레이를 매핑하거나 변환해도 될까요?

밑줄 대신 lodash를 사용하는 경우 다음을 수행합니다.

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

이렇게 하면 둘 다 변환됩니다.TitleCase그리고.snake_case로.camelCase단, 재귀적인 것은 아닙니다.

다음은 JavaScript 객체의 모든 속성을 적절히 camelCase할 수 있는 신뢰할 수 있는 재귀 함수입니다.

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
}

테스트:

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

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

출력:

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

이 작업은 다음 재귀 함수(lodash 및 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;
};

테스트:

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

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

출력:

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

일반 객체의 키를 변경하려면snake_case로.camelCase 재귀적으로 다음을 시도하다
(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;
};

이 PLUNKER에서의 테스트

주의: 어레이 내의 오브젝트에 대해서도 재귀적으로 동작합니다.

lodash 및 ES6를 사용하면 모든 키가 재귀적으로 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) 
    };
  }, {});
};      

혹을 사용하세요.

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

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

이것은 Axios 가로채기의 훌륭한 사용 사례입니다.

기본적으로 클라이언트 클래스를 정의하고 요청/응답 데이터를 변환하는 전후 대행 수신기를 연결합니다.

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)
    }
}

다음은 React/axios를 사용한 보다 긴 예시를 포함한 요지입니다.

이걸 위한 좋은 npm 모듈이 있어요https://www.npmjs.com/package/camelcase-keys

npm install camelcase-keys

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

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

돌아올 것이다...

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

위의 플레인 js 솔루션을 기반으로 하는 이 솔루션에서는 loadash와 Keep an array if passed a parameter와 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>

lodash를 사용하면 다음과 같이 할 수 있습니다.

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

난 도전을 받아들였고 알아냈다고 생각해

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);

속성 변환기(jsfiddle)

이 트릭은 오브젝트를 오브젝트 속성 배열로 처리하는 것입니다.

여기 편리한 라이브러리가 있습니다.https://www.npmjs.com/package/camelize2

를 사용하여 설치하기만 하면 됩니다.npm install --save camelize2그리고 나서.

const camelize = require('camelize2')

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

const camelizedResponse = camelize(response)

@brandonscript와 비슷하지만 ES6 기능면에서 보면 다음과 같습니다.

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)

배열이나 오브젝트를 받아들일 수 있는 일반적인 방법이 필요했습니다.이게 제가 쓰고 있는 거예요(Kyor Code의 것을 빌렸습니다).firstToLower()실장):

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;
};

콜의 예:

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"}

lodash 및 일부 es6+ 기능에 대한 과제를 해결했습니다. 다음은 축소 기능을 사용한 구현입니다.

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

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
}

https://plnkr.co/edit/jtsRo9yU12geH7fkQ0WL?p=preview의 참조를 사용하여 코드가 갱신되었습니다.이것에 의해, 어레이를 어레이로서 보관 유지하는 등, 어레이가 있는 오브젝트도 처리됩니다(맵을 사용해 반복할 수 있습니다).

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;  
}

코드의, , 할 수 . Brandoncode의 구현보다 읽기 쉽고 중첩이 적으며 다음과 같은 엣지 케이스를 처리할 수 있는 공간이 더 넓습니다.Date 또는 (은 취급되지 )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;
}

goredwards answer를 기반으로 구축(어레이 필드를 올바르게 처리하지 않음)

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
}

여기 제가 찾은 코드가 있습니다. 완전히 테스트되지는 않았지만 공유할 가치가 있습니다.다른 답변보다 훨씬 읽기 쉬우며 성능에 대한 확신이 없습니다.

테스트: 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;
};

순수 JavaScript, 정상적으로 동작해야 합니다.

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;
            }, {});
        }
    }
}

할 수 요.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

이렇게 하면 캐스케이드된 모든 오브젝트도 처리됩니다.

오브젝트 키를 deep가 있는 camelCase로 변환합니다.

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;
}

언급URL : https://stackoverflow.com/questions/12931828/convert-returned-json-object-properties-to-lower-first-camelcase