Using ramdajs for renaming properties of an object

Question

I would need to rewrite all properties for an object which could contains hyphenated word to camelCase using ramdajs.

Example, property name animation-timing-function should become animationTimingFunctionand so on for every keys.

Could you please provide an example:

Here is data I should convert:

var data = {
  "bounce": [
    {
      "animation-timing-function": "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
      "transform": "translate3d(0,0,0)",
      "offset": 0
    },
    {
      "animation-timing-function": "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
      "transform": "translate3d(0,0,0)",
      "offset": 0.2
    },
    {
      "animation-timing-function": "cubic-bezier(0.755, 0.050, 0.855, 0.060)",
      "transform": "translate3d(0, -30px, 0)",
      "offset": 0.4
    },
    {
      "animation-timing-function": "cubic-bezier(0.755, 0.050, 0.855, 0.060)",
      "transform": "translate3d(0, -30px, 0)",
      "offset": 0.43
    },
    {
      "animation-timing-function": "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
      "transform": "translate3d(0,0,0)",
      "offset": 0.53
    },
    {
      "animation-timing-function": "cubic-bezier(0.755, 0.050, 0.855, 0.060)",
      "transform": "translate3d(0, -15px, 0)",
      "offset": 0.7
    },
    {
      "animation-timing-function": "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
      "transform": "translate3d(0,0,0)",
      "offset": 0.8
    },
    {
      "transform": "translate3d(0,-4px,0)",
      "offset": 0.9
    },
    {
      "animation-timing-function": "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
      "transform": "translate3d(0,0,0)",
      "offset": 1
    }
  ]
};

I have tried modify this receipt but with no success:

const renameKeys = R.curry((keysMap, obj) => {
  return R.reduce((acc, key) => {
    acc[keysMap[key] || key] = obj[key];
    return acc;
  }, {}, R.keys(obj));
});

Answer 1

It's not clear to me what you tried. With that function and a small bit of infrastructure to apply it to the right objects, it seems to work for me:

R.over(lensProp('bounce'), map(renameKeys({
  'animation-timing-function': 'animationTimingFunction'
})), data)

//=> {bounce: [
//   {
//     animationTimingFunction: "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
//     offset: 0,
//     transform: "translate3d(0,0,0)"
//   },
//   {
//     animationTimingFunction: "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
//     offset: 0.2,
//     transform: "translate3d(0,0,0)"
//   },
//   // ...
// ]}

But that seems to be the only key having hyphens in the name, so perhaps I'm simply confused. Are there supposed to be others?

You can see this in action on the Ramda REPL.

Update

Based on follow-up comments, it looks like the entry in Ramda's Cookbook right before the one you used is more appropriate:

const mapKeys = R.curry((fn, obj) =>
  R.fromPairs(R.map(R.adjust(fn, 0), R.toPairs(obj)))
);

Although Ramda does not include a camelCase function, you can find them all over the Web, or create your own quite easily. One version:

const camelCase = (str) => str.replace(/[-_]([a-z])/g, 
  (m) => m[1].toUpperCase()
)

With these, it's even easier:

R.over(lensProp('bounce'), map(mapKeys(camelCase)), data)

//=> {bounce: [
//   {
//     animationTimingFunction: "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
//     anotherHyphenatedEntry: "foo",
//     offset: 0,
//     transform: "translate3d(0,0,0)"
//   },
//   {
//     animationTimingFunction: "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
//     offset: 0.2,
//     transform: "translate3d(0,0,0)"
//   },
//   // ...

Again, this version is also available in the Ramda REPL.

Answer 2

This variant rename all nested keys too

const isObject = o => equals(type(o), 'Object')
const rKeys = fn => ifElse(isObject, renameKeys(fn), identity)
const mapper = fn => map(([key, value]) => [fn(key), rKeys(fn)(value)])
let renameKeys = curry((fn, obj) => compose(
  fromPairs,
  mapper(fn),
  toPairs
)(obj))

From

{gender: {userinfo: 2, purchase: ['one', 'two'], key: {nestedKey: 1}}, anotherKey: {anotherAnotherKey: 3}}

To

{ANOTHERKEY: {ANOTHERANOTHERKEY: 3}, GENDER: {KEY: {NESTEDKEY: 1}, PURCHASE: ["one", "two"], USERINFO: 2}}

Playground