Change the object's property names from camel case to sentence case

Question

Change the object's property names from camel case to sentence case

Consider an array of objects like this:

data = [{keyOne: 'value1', keyTwo: 'value2'},
          {keyOne: 'value3', keyTwo: 'value4'}];

We need to change it to look like this:

data = [{Key one: 'value1', Key two: 'value2'},
          {Key one: 'value3', Key two: 'value4'}];

To achieve this transformation, each property value should be converted from camel case to a sentence format, for example keyOne becomes Key one.

A function can be used for this conversion:

function convertToSentence(text) {
  const result = text.replace( /([A-Z])/g, " $1" );
  const finalResult = result.charAt(0).toUpperCase() + result.slice(1);
  return finalResult;
}

The challenge is applying this function to every object in the array. One way is to use data.forEach(item => ... );

Any suggestions on how to approach this task?

javascript arrays object ecmascript-6

Answer 1

Answer №1

To iterate through an object, you can convert it into [key, value] pairs using the Object.entries() method, map through these pairs, and then convert them back to an object with Object.fromEntries().

I have developed a function called mapKeys that takes a transformFn as input and updates the keys of the object accordingly.

const mapKeys = (transormFn, obj) => Object.fromEntries(
  Object.entries(obj)
    .map(([key, value]) => [transormFn(key), value])
);

const myData = [{"firstName":"john","lastName":"y","hairColor":"black"},{"firstName":"mike","lastName":"x","hairColor":"green"},{"firstName":"alex","lastName":"z","hairColor":"brown"}];

function replaceIt(text) {
  const result = text.replace(/([A-Z])/g, " $1");
  const finalResult = result.charAt(0).toUpperCase() + result.slice(1).toLowerCase(); // result.slice(1).toLowerCase() should get you the desired form
  return finalResult;
}

const result = myData.map(o => mapKeys(replaceIt, o));

console.log(result);

An interesting suggestion by @ScottSauyet is to curry the mapKeys function. This eliminates the need for an arrow function when mapping through the array:

const mapKeys = transormFn => obj => Object.fromEntries(
  Object.entries(obj)
    .map(([key, value]) => [transormFn(key), value])
);

const myData = [{"firstName":"john","lastName":"y","hairColor":"black"},{"firstName":"mike","lastName":"x","hairColor":"green"},{"firstName":"alex","lastName":"z","hairColor":"brown"}];

function replaceIt(text) {
  const result = text.replace(/([A-Z])/g, " $1");
  const finalResult = result.charAt(0).toUpperCase() + result.slice(1).toLowerCase(); // result.slice(1).toLowerCase() should get you the desired form
  return finalResult;
}

const result = myData.map(mapKeys(replaceIt));

console.log(result);

Answer 2

To iterate through an object, you can convert it into [key, value] pairs using the Object.entries() method, map through these pairs, and then convert them back to an object with Object.fromEntries().

I have developed a function called mapKeys that takes a transformFn as input and updates the keys of the object accordingly.

const mapKeys = (transormFn, obj) => Object.fromEntries(
  Object.entries(obj)
    .map(([key, value]) => [transormFn(key), value])
);

const myData = [{"firstName":"john","lastName":"y","hairColor":"black"},{"firstName":"mike","lastName":"x","hairColor":"green"},{"firstName":"alex","lastName":"z","hairColor":"brown"}];

function replaceIt(text) {
  const result = text.replace(/([A-Z])/g, " $1");
  const finalResult = result.charAt(0).toUpperCase() + result.slice(1).toLowerCase(); // result.slice(1).toLowerCase() should get you the desired form
  return finalResult;
}

const result = myData.map(o => mapKeys(replaceIt, o));

console.log(result);

An interesting suggestion by @ScottSauyet is to curry the mapKeys function. This eliminates the need for an arrow function when mapping through the array:

const mapKeys = transormFn => obj => Object.fromEntries(
  Object.entries(obj)
    .map(([key, value]) => [transormFn(key), value])
);

const myData = [{"firstName":"john","lastName":"y","hairColor":"black"},{"firstName":"mike","lastName":"x","hairColor":"green"},{"firstName":"alex","lastName":"z","hairColor":"brown"}];

function replaceIt(text) {
  const result = text.replace(/([A-Z])/g, " $1");
  const finalResult = result.charAt(0).toUpperCase() + result.slice(1).toLowerCase(); // result.slice(1).toLowerCase() should get you the desired form
  return finalResult;
}

const result = myData.map(mapKeys(replaceIt));

console.log(result);

Answer 3

Answer №2

Use Array.reduce along with Object.entries:

const transformedData = myData.map(
  obj => Object.entries(obj)
    .reduce( (accumulator, [key, value]) => ({
      ...accumulator,
      [modifyKey(key)]: value,
    }), {})
);

Answer 4

Use Array.reduce along with Object.entries:

const transformedData = myData.map(
  obj => Object.entries(obj)
    .reduce( (accumulator, [key, value]) => ({
      ...accumulator,
      [modifyKey(key)]: value,
    }), {})
);

Change the object's property names from camel case to sentence case

Answer №1

Answer №2

Similar questions

There was an issue encountered when trying to call a PHP file within an HTML table using Ajax and data.html

Modify the javascript addEventListener to use 'scroll' instead of 'wheel'

Is it possible for Yarn to fail to include both ESM and CJS versions of a package during publishing or adding?

Tips for creating animated card designs with HTML, CSS, and JavaScript

Creating a functional hyperlink within a ui-sref element in Ionic

An error occurred during conversion: trying to convert an object to an array

Invoke a function from within an event handler

Fixing perspective clipping in Three.js

Verifying if checkboxes are selected in PHP using JavaScript

Observing rxjs Observable - loop through the results and exit when a certain condition is met / encountering an issue with reading property 'subscribe' of an undefined value

Reading data from a file and storing it in an array

What is the best way to incorporate correct reference logic when utilizing Joi validation?

Enhancing WordPress Menu Items with the 'data-hover' Attribute

How can we efficiently generate ReactJS Router for Links and seamlessly display a unique page for each Link?

Leverage the https module within your React Native application

Tips on sorting objects by comparing them to array elements

Interacting with JSON API data in real-time using AJAX and the power of JQuery

Continuously iterate through a PHP page until the session variable reaches a specific value

Sending a string to the server-side using Jquery Ajax

Exploring the capabilities of Set() and the for..in loop in JavaScript