Ways to convert all keys to uppercase in an array of objects?

Question

Ways to convert all keys to uppercase in an array of objects?

Is there a way to capitalize the first letter of every key in an array of objects? I attempted to achieve this with the code below, but it's not working as expected.

Any suggestions or corrections are appreciated. #current code

  function capitalizeObjectKeys(obj) {
    return _.transform(obj, function (result, val, key:any) {
      result[key.charAt(0).toUpperCase() + key.slice(1)] = val;
  });
  }

#sample object

  [{
        "id": 3,
        "accountId": 6,
        "title": "ABCDF Copy",
        "versionDto": {
            "id": 3,
            "entitlementsTemplateId": 3,
            "status": "Draft",
            "entitlementElementsTemplateDto": [
                {
                    "id": 5,
                    "isHeaderCategory": false,
                    "order": 1,
                },
        {
                    "id": 6,
                    "isHeaderCategory": false,
                    "order": 2,
                }

            ]
        }
    }]

#expected output

[{
    "Id": 3,
    "AccountId": 6,
    "Title": "ABCDF Copy",
    "VersionDto": {
        "Id": 3,
        "EntitlementsTemplateId": 3,
        "Status": "Draft",
        "EntitlementElementsTemplateDto": [
            {
                "Id": 5,
                "IsHeaderCategory": false,
                "Order": 1,
            },
            {
                "Id": 2,
                "IsHeaderCategory": false,
                "Order": 2,
            }

        ]
    }
}]

javascript arrays typescript object

Answer 1

Answer №1

Let's recursively iterate through the entire object using Object.keys(obj)

const transformKeys = (obj) => {
  if (!obj) {
    return;
  }
  Object.keys(obj).forEach(key => {
    var value = obj[key]
    if (typeof value === "object" && value !== null) {
      transformKeys(value)
    }
    var Key = key[0].toUpperCase() + key.substr(1);
    delete obj[key];
    obj[Key] = value;
  })
}

var obj = [{
  "id": 3,
  "accountId": 6,
  "title": "ABCDF Copy",
  "versionDto": {
    "id": 3,
    "entitlementsTemplateId": 3,
    "status": "Draft",
    "entitlementElementsTemplateDto": [{
        "id": 5,
        "isHeaderCategory": false,
        "order": 1,
      },
      {
        "id": 6,
        "isHeaderCategory": false,
        "order": 2,
      }

    ]
  }
}]


var object2 = {
  "id": 2,
  "accountId": 6,
  "title": "TEMPLATE 2",
  "entitlementsTemplateVersionDto": {
    "id": 2,
    "entitlementsTemplateId": 2,
    "status": "Draft",
    "entitlementElementsTemplateDto": [{
        "id": 2,
        "entitlementsTemplateVersionId": 2,
        "entitlementName": "TEMPLATE C",
        "isHeaderCategory": true,
        "order": 1,
        "isRequired": false,
        "entitlementSubCategoryElementsTemplateDto": [{
            "id": 1,
            "entitlementElementsTemplateId": 2,
            "entitlementName": "",
            "order": 0,
            "isRequired": false
          },
          {
            "id": 2,
            "entitlementElementsTemplateId": 2,
            "entitlementName": "",
            "order": 0,
            "isRequired": false
          }
        ]
      },
      {
        "id": 3,
        "entitlementsTemplateVersionId": 2,
        "entitlementName": "TEMPLATE B",
        "isHeaderCategory": false,
        "order": 1,
        "isRequired": false,
        "entitlementSubCategoryElementsTemplateDto": []
      },
      {
        "id": 4,
        "entitlementsTemplateVersionId": 2,
        "entitlementName": "TEMPLATE A",
        "isHeaderCategory": false,
        "order": 1,
        "isRequired": true,
        "entitlementSubCategoryElementsTemplateDto": []
      }
    ]
  }
}


transformKeys(obj);
console.log(obj)

transformKeys(object2);
console.log(object2)

.as-console-wrapper {
  max-height: 100% !important;
}

Answer 2

Let's recursively iterate through the entire object using Object.keys(obj)

const transformKeys = (obj) => {
  if (!obj) {
    return;
  }
  Object.keys(obj).forEach(key => {
    var value = obj[key]
    if (typeof value === "object" && value !== null) {
      transformKeys(value)
    }
    var Key = key[0].toUpperCase() + key.substr(1);
    delete obj[key];
    obj[Key] = value;
  })
}

var obj = [{
  "id": 3,
  "accountId": 6,
  "title": "ABCDF Copy",
  "versionDto": {
    "id": 3,
    "entitlementsTemplateId": 3,
    "status": "Draft",
    "entitlementElementsTemplateDto": [{
        "id": 5,
        "isHeaderCategory": false,
        "order": 1,
      },
      {
        "id": 6,
        "isHeaderCategory": false,
        "order": 2,
      }

    ]
  }
}]


var object2 = {
  "id": 2,
  "accountId": 6,
  "title": "TEMPLATE 2",
  "entitlementsTemplateVersionDto": {
    "id": 2,
    "entitlementsTemplateId": 2,
    "status": "Draft",
    "entitlementElementsTemplateDto": [{
        "id": 2,
        "entitlementsTemplateVersionId": 2,
        "entitlementName": "TEMPLATE C",
        "isHeaderCategory": true,
        "order": 1,
        "isRequired": false,
        "entitlementSubCategoryElementsTemplateDto": [{
            "id": 1,
            "entitlementElementsTemplateId": 2,
            "entitlementName": "",
            "order": 0,
            "isRequired": false
          },
          {
            "id": 2,
            "entitlementElementsTemplateId": 2,
            "entitlementName": "",
            "order": 0,
            "isRequired": false
          }
        ]
      },
      {
        "id": 3,
        "entitlementsTemplateVersionId": 2,
        "entitlementName": "TEMPLATE B",
        "isHeaderCategory": false,
        "order": 1,
        "isRequired": false,
        "entitlementSubCategoryElementsTemplateDto": []
      },
      {
        "id": 4,
        "entitlementsTemplateVersionId": 2,
        "entitlementName": "TEMPLATE A",
        "isHeaderCategory": false,
        "order": 1,
        "isRequired": true,
        "entitlementSubCategoryElementsTemplateDto": []
      }
    ]
  }
}


transformKeys(obj);
console.log(obj)

transformKeys(object2);
console.log(object2)

.as-console-wrapper {
  max-height: 100% !important;
}

Answer 3

Answer №2

It appears that the issue lies in your handling of capitalization.

To resolve this, consider implementing the following approach:

const adjustKeyToCapitalize = (key) => key.charAt(0).toUpperCase() + key.slice(1);

Take a look at this basic demonstration below:

const modifyObjectKeysToCapitalize = (obj) => {
  if (!obj) return;
  if (Array.isArray(obj)) {
    return obj.map((each) => modifyObjectKeysToCapitalize(each))
  }
  const result = {};
  Object.keys(obj).forEach((key) => {
    const newKey = key.charAt(0).toUpperCase() + key.slice(1);
    const objectValue = (typeof obj[key] === 'object') ? modifyObjectKeysToCapitalize(obj[key]) : obj[key];
    result[newKey] = objectValue;
  });
  return result;
};

const example = [{"id":3,"accountId":6,"title":"ABCDF Copy","versionDto":{"id":3,"entitlementsTemplateId":3,"status":"Draft","entitlementElementsTemplateDto":[{"id":5,"isHeaderCategory":false,"order":1},{"id":6,"isHeaderCategory":false,"order":2}]}}];

const updatedObject = modifyObjectKeysToCapitalize(example)

console.log(updatedObject);

Answer 4

It appears that the issue lies in your handling of capitalization.

To resolve this, consider implementing the following approach:

const adjustKeyToCapitalize = (key) => key.charAt(0).toUpperCase() + key.slice(1);

Take a look at this basic demonstration below:

const modifyObjectKeysToCapitalize = (obj) => {
  if (!obj) return;
  if (Array.isArray(obj)) {
    return obj.map((each) => modifyObjectKeysToCapitalize(each))
  }
  const result = {};
  Object.keys(obj).forEach((key) => {
    const newKey = key.charAt(0).toUpperCase() + key.slice(1);
    const objectValue = (typeof obj[key] === 'object') ? modifyObjectKeysToCapitalize(obj[key]) : obj[key];
    result[newKey] = objectValue;
  });
  return result;
};

const example = [{"id":3,"accountId":6,"title":"ABCDF Copy","versionDto":{"id":3,"entitlementsTemplateId":3,"status":"Draft","entitlementElementsTemplateDto":[{"id":5,"isHeaderCategory":false,"order":1},{"id":6,"isHeaderCategory":false,"order":2}]}}];

const updatedObject = modifyObjectKeysToCapitalize(example)

console.log(updatedObject);

Ways to convert all keys to uppercase in an array of objects?

Answer №1

Answer №2

Similar questions

When a property is passed as a prop in a Vue component, it is received

Issue with knockout view - unable to remove item from view after deletion

Trigger modal on designated ID

Gather data from a variety of HTML5 video seminars

Is it possible to generate an interactive HTML form using JSON information?

Renewed Promises: Exploring Promises in Angular JS

Invoking Ajax Within Every Loop

Utilizing jQuery with variable assignment: A beginner's guide

Child component in VueJs is undergoing a situation where the variable is found to be

Issue with AJAX MVC HTML: jQuery value is not blocking API call

Troubleshooting Problem with Installing Angular2-Google-Maps Component in FountainJS Application

Animating a div in jQuery by creating a duplicate

Rearrange element's placement using Jquery Drag & Drop

Having difficulty with pagination within a callback function

Begin anew with Flip.js

Implementing ng-if with asynchronous functions: A step-by-step guide

Removing a specific item from a Kendo UI dropdown list

"Can anyone provide guidance on how to initiate a css 3d animation by clicking a button

React allows for items to be exchanged between two lists

Can curly braces be utilized in the style section of Vue.js?