What is the most effective method for converting all the keys in a nested array of objects to camel case?

Question

What is the most effective method for converting all the keys in a nested array of objects to camel case?

I'm looking to convert all keys of my array of objects into camelCase using TypeScript. Here is the data I have:

[
    {
       "Name":"Custom property",
       "Details":{
          "Address":"Huston",
          "Price":"1000000",
       },
       "Contact":{
          "Global":"3432432",
          "Local":"432423423"
       },
    },
    {
       "Name":"Myproperty",
       "Details":{
          "Address":"Huston",
          "Price":"10000001",
       },
       "Contact":{
          "Global":"34324323",
          "Local":"4324234233"
       },
    },
]

Although I attempted the code below, it only returns a new dictionary with the details. How can I fix this issue?

const newObjOptions = options.map((obj: any) =>
    Object.fromEntries(
      Object.entries(obj).map(([k, v]) => [_.camelCase(k), v])
    )
  );
  const newObjDetailsOptions = newObjOptions.map((obj: any) =>
    Object.fromEntries(
      Object.entries(obj.details).map(([k, v]) => [_.camelCase(k), v])
    )
  );

javascript json typescript camelcasing

Answer 1

Answer №1

Your code is effective because when you log both newObjOptions and newObjDetailsOptions, you'll notice that the top-layer of keys is indeed camel-cased.

However, the issue arises from the fact that your code does not verify if the object contains any nested objects.

const newObjOptions = options.map((obj) =>
  Object.fromEntries(
    // You need to check if the value of `v` is an object to camel-case it as well
    Object.entries(obj).map(([k, v]) => [_.camelCase(k), v])
  )
)

To address this issue, you can make modifications to your code like so:

// Check if `v` is an object and apply camel casing recursively
const camelCaseEntry = ([k, v]) => [_.camelCase(k), typeof v === 'object' ? camelCaseObject(v) : v]

const camelCaseObject = obj => Object.fromEntries(
  Object.entries(obj).map(camelCaseEntry)
)

const newObjOptions = options.map(camelCaseObject)
console.log(newObjOptions)

This modification works well with your example, but it may fail if the object contains an array. To handle this scenario, you can implement a simple recursive function, like this:

/**
 * Returns a new object with all keys in camel case, handling nested arrays and objects
 */
function camelCaseObject (object) {
  if (Array.isArray(object)) {
    return object.map(camelCaseObject)
  }
  if (typeof object === 'object') {
    const entries = Object.entries(object)
    return Object.fromEntries(entries.map(transfromEntry))
  }
  return object

  function transfromEntry ([k, v]) {
    return [
      _.camelCase(k),
      typeof v === 'object' ? camelCaseObject(v) : v
    ]
  }
}

Answer 2

Your code is effective because when you log both newObjOptions and newObjDetailsOptions, you'll notice that the top-layer of keys is indeed camel-cased.

However, the issue arises from the fact that your code does not verify if the object contains any nested objects.

const newObjOptions = options.map((obj) =>
  Object.fromEntries(
    // You need to check if the value of `v` is an object to camel-case it as well
    Object.entries(obj).map(([k, v]) => [_.camelCase(k), v])
  )
)

To address this issue, you can make modifications to your code like so:

// Check if `v` is an object and apply camel casing recursively
const camelCaseEntry = ([k, v]) => [_.camelCase(k), typeof v === 'object' ? camelCaseObject(v) : v]

const camelCaseObject = obj => Object.fromEntries(
  Object.entries(obj).map(camelCaseEntry)
)

const newObjOptions = options.map(camelCaseObject)
console.log(newObjOptions)

This modification works well with your example, but it may fail if the object contains an array. To handle this scenario, you can implement a simple recursive function, like this:

/**
 * Returns a new object with all keys in camel case, handling nested arrays and objects
 */
function camelCaseObject (object) {
  if (Array.isArray(object)) {
    return object.map(camelCaseObject)
  }
  if (typeof object === 'object') {
    const entries = Object.entries(object)
    return Object.fromEntries(entries.map(transfromEntry))
  }
  return object

  function transfromEntry ([k, v]) {
    return [
      _.camelCase(k),
      typeof v === 'object' ? camelCaseObject(v) : v
    ]
  }
}

Answer 3

Answer №2

Even though the response provided by kill was accepted, I encountered two limitations when attempting to implement it internally.

The solution is not adaptable for all scenarios.
It lacks the capability to handle null values (resulting in a function that never returns if a nested array contains any null values)

Let's create a versatile function that can handle null values effectively:

const objectify = (transformFn: (key: string) => string) => (object: object): object => {
  const transform = ([k, v]: [string, any]) => [
    transformFn(k),
    typeof v === 'object' ? objectify(transformFn)(v) : v
  ]

  if (Array.isArray(object)) {
    return object.map(objectify(transformFn))
  }

  if (typeof object === 'object' && object !== null) {
    const entries = Object.entries(object)
    return Object.fromEntries(entries.map(transform))
  }

  return object
}

export default objectify

Now let's apply camelCase using the objectify function:

import { camelCase } from 'lodash'
import objectify from './objectify'

const camelify = <T extends object> (object: T): object => objectify(camelCase)(object)

export default camelify

To utilize this function, simply pass your objects as parameters: import camelify from './camelify'

const object = camelify({hello_world: 'value'}); // becomes {helloWorld: 'value'}

Answer 4

Even though the response provided by kill was accepted, I encountered two limitations when attempting to implement it internally.

The solution is not adaptable for all scenarios.
It lacks the capability to handle null values (resulting in a function that never returns if a nested array contains any null values)

Let's create a versatile function that can handle null values effectively:

const objectify = (transformFn: (key: string) => string) => (object: object): object => {
  const transform = ([k, v]: [string, any]) => [
    transformFn(k),
    typeof v === 'object' ? objectify(transformFn)(v) : v
  ]

  if (Array.isArray(object)) {
    return object.map(objectify(transformFn))
  }

  if (typeof object === 'object' && object !== null) {
    const entries = Object.entries(object)
    return Object.fromEntries(entries.map(transform))
  }

  return object
}

export default objectify

Now let's apply camelCase using the objectify function:

import { camelCase } from 'lodash'
import objectify from './objectify'

const camelify = <T extends object> (object: T): object => objectify(camelCase)(object)

export default camelify

To utilize this function, simply pass your objects as parameters: import camelify from './camelify'

const object = camelify({hello_world: 'value'}); // becomes {helloWorld: 'value'}

What is the most effective method for converting all the keys in a nested array of objects to camel case?

Answer №1

Answer №2

Similar questions

What are the best techniques for creating animations in AngularJS?

creating a versatile axios function through object decomposition

Using Volley to display a ListView

``Is there a way to access the $attrs data of child DOM elements from within a controller?

JavaScript can be used to open several tabs simultaneously within a single browser window

Ways to incorporate vector .svg images into a D3js tree diagram

Creating a worldwide object in JavaScript

Sorting through names within a nested array based on specific criteria

Is it true that Javascript does not allow for saving or outputting actions?

Developing a user authentication system with TowerJS

Generate a dynamic jqplot chart using data retrieved from a variable and JSON data

Set a timeout for a single asynchronous request

Using nodemailer to send an email with a dynamic variable that holds the HTML content

What is the best way to trigger a random quote to load from an API in ReactJS using an event like onLoad or another method?

Utilizing Facebook's UI share URL parameters within the Facebook app on mobile devices

The Console.log function first displays an Object, and then changes to display an Array containing a single object when clicked

Changing Powershell into Nested Json

How to italicize a portion of output using JavaScript

Is it possible for my WebDriver script to detect an event triggered by the webpage?

The expected functionality of sending files via ajax is not happening as anticipated