How to Convert Object Keys in JavaScript (2 ways)
Have you ever ran into an issue where the API you’re hitting requires params to be snake_cased, when the object keys you have are camelCased? How about a validation library, where the keys you use for your form objects don’t quite match up to what the library expects?
You have to create a new object for it to work correctly — but you don’t want to erase all of the code that you’ve already built to get to this point.
I recently ran into this on a project, and wanted to share my experience and what worked well for me in my situation.
Before diving in, I am going to be using standard ES6 import and export statements here. If you’re not familiar with this syntax, Digital Ocean has a great introduction to what these are on their site.
When I created this, I was working in Vue, and had it’s compiler bundling my JavaScript allowing me to use ES6. If you can’t use import and export, defining these as global functions will absolutely work.
Setup
In each case, the setup will be the same: inside of your project, create an empty javascript file named snakeCase.js. Inside of that empty JavaScript file, add an empty function: snakeCaseObjectKeys(). Your finished snakeCase.js should look like this:
Way #1: JavaScript’s .reduce() method
The first way that I’ll run through uses JavaScript’s .reduce() method. There’s a million ways you can use .reduce(), but here, I’m using it to create a new object, iterate through all of the original object keys, and then insert values from the original object into the new object.
.reduce() can be hard to pick up on, and there’s a lot happening here, so I’ll explain each line step by step. First, on line 2, you want to be able to convert your object on the fly, so you need to return the value of what .reduce() will give you. This allows you to use the function like so:
newObject = snakeCaseObjectKeys(oldObject);Second, .reduce() takes two arguments: the current iteration (key in this case), and the final result (newObject in this case).
Next, we have snakeCasedKey, and this is what actually transforms the key: it will take example_key and turn it into exampleKey.
Now that we have the new key, we check to see if the value for that key is present in the new object on line 5. If it’s not, we take the value for the same key in the old object, and set it to it’s new snakeCased key on line 8.
Finally, we return the newObject for each iteration of the .reduce().
Way #2: Creating a new object manually
As you can probably see, a second way to do this uses a lot of the same code: you still create a new key, snakeCasedKey, determine if the value for that key is present in the new object, and insert values if it’s not.
The only major difference here is that instead of .reduce(), we first create the new object manually, and then iterate through the object keys with .forEach(). Finally, you return the newObject on line 14.
For a working example of both methods, check out this free Codepen.
