Modify the key within an array of objects that share a common key

Question

Modify the key within an array of objects that share a common key

I have an object structured as follows:

NewObjName: Object { OLDCOLUMNNAME1: "NEWCOLUMN_NAME1", OLDCOLUMNNAME2: "NEWCOLUMN_NAME2", OLDCOLUMNNAME3: "NEWCOLUMN_NAME3"}

Next, there is an array containing objects in this format:

array: [
1: Object { OLDCOLUMNNAME1: "VALUE", OLDCOLUMNNAME2: "VALUE", OLDCOLUMNNAME3: "VALUE"}
2: Object { OLDCOLUMNNAME1: "VALUE", OLDCOLUMNNAME2: "VALUE", OLDCOLUMNNAME3: "VALUE"}
3: Object { OLDCOLUMNNAME1: "VALUE", OLDCOLUMNNAME2: "VALUE", OLDCOLUMNNAME3: "VALUE"}
]

Both objects share a common key = OLDCOLUMNNAME.

The goal is to change the key (OLDCOLUMNNAME) to NEWCOLUMN_NAME from the first object (NewObjName).

The desired output should be:

array: [
1: Object { NEWCOLUMN_NAME1: "VALUE", NEWCOLUMN_NAME2: "VALUE", NEWCOLUMN_NAME3: "VALUE"}
2: Object { NEWCOLUMN_NAME1: "VALUE", NEWCOLUMN_NAME2: "VALUE", NEWCOLUMN_NAME3: "VALUE"}
3: Object { NEWCOLUMN_NAME1: "VALUE", NEWCOLUMN_NAME2: "VALUE", NEWCOLUMN_NAME3: "VALUE"}
]

An attempt was made using the following code:

const transformed = array.map(x => {
            // console.log(x); // loop through array with objects
            Object.keys(x).map(key1 => {
            // console.log(key1); // get OLDCOLUMNNAME

                Object.keys(NewObjName).map(key => {
                // console.log(key); // get OLDCOLUMNNAME from NewObjName
                // console.log(NewObjName[key]) //  NEWCOLUMN_NAME

                if (key1 === key) {
                   //if true i just try to set into OLDCOLUMNNAME to NEWCOLUMN_NAME
                   key1 = NewObjName[key]
                   delete NewObjName[key]
                }
         })
    })
})

However, when checking the result (console.log(transformed)), it returns undefined.

javascript arrays angular typescript object

Answer 1

Answer №1

If you are looking to transform an object, utilizing the reduce and forEach methods can be quite beneficial.

const modifiedObj = array.reduce((accumulator, current) => {
  const newObj = {}
  Object.entries(current).forEach(([key, value]) => { // access each item 
    newObj[newKeyName[key]] = value;                 // map the key using newKeyName lookup table
  })
  accumulator.push(newObj)
  return accumulator;
}, [])
console.log(modifiedObj)

<script>
const newKeyName = {
  OLDKEY1: "NEW_KEY1",
  OLDKEY2: "NEW_KEY2",
  OLDKEY3: "NEW_KEY3"
}

const array = [{
    OLDKEY1: "VALUE1",
    OLDKEY2: "VALUE2",
    OLDKEY3: "VALUE3"
  },
  {
    OLDKEY1: "VALUE11",
    OLDKEY2: "VALUE22",
    OLDKEY3: "VALUE33"
  },
  {
    OLDKEY1: "VALUE111",
    OLDKEY2: "VALUE222",
    OLDKEY3: "VALUE333"
  }
]
</script>

Answer 2

If you are looking to transform an object, utilizing the reduce and forEach methods can be quite beneficial.

const modifiedObj = array.reduce((accumulator, current) => {
  const newObj = {}
  Object.entries(current).forEach(([key, value]) => { // access each item 
    newObj[newKeyName[key]] = value;                 // map the key using newKeyName lookup table
  })
  accumulator.push(newObj)
  return accumulator;
}, [])
console.log(modifiedObj)

<script>
const newKeyName = {
  OLDKEY1: "NEW_KEY1",
  OLDKEY2: "NEW_KEY2",
  OLDKEY3: "NEW_KEY3"
}

const array = [{
    OLDKEY1: "VALUE1",
    OLDKEY2: "VALUE2",
    OLDKEY3: "VALUE3"
  },
  {
    OLDKEY1: "VALUE11",
    OLDKEY2: "VALUE22",
    OLDKEY3: "VALUE33"
  },
  {
    OLDKEY1: "VALUE111",
    OLDKEY2: "VALUE222",
    OLDKEY3: "VALUE333"
  }
]
</script>

Answer 3

Answer №2

One way to approach this issue would be with a general solution like so:

const data = [
    { OLDKEY1: 'VALUE', OLDKEY2: 'VALUE', OLDKEY3: 'VALUE' },
    { OLDKEY1: 'VALUE', OLDKEY2: 'VALUE', OLDKEY3: 'VALUE' },
    { OLDKEY1: 'VALUE', OLDKEY2: 'VALUE', OLDKEY3: 'VALUE' },
  ];
  
// specifying the mapping of old keys to new keys
  const mapKeys = {
    OLDKEY1: 'NEWKEY1',
    OLDKEY2: 'NEWKEY2',
    OLDKEY3: 'NEWKEY3'
  };
  
// function to replace old keys with new keys according to the map
const replaceOldKeys = (obj, keyMap) => Object.keys(obj)
    .reduce((result, currentKey) => Object.assign(result, { [keyMap[currentKey]]: obj[currentKey] }), {});
  
// looping through the data array and applying key replacement using the above function
const newData = data.map(item => replaceOldKeys(item, mapKeys));

console.log(newData)

Answer 4

One way to approach this issue would be with a general solution like so:

const data = [
    { OLDKEY1: 'VALUE', OLDKEY2: 'VALUE', OLDKEY3: 'VALUE' },
    { OLDKEY1: 'VALUE', OLDKEY2: 'VALUE', OLDKEY3: 'VALUE' },
    { OLDKEY1: 'VALUE', OLDKEY2: 'VALUE', OLDKEY3: 'VALUE' },
  ];
  
// specifying the mapping of old keys to new keys
  const mapKeys = {
    OLDKEY1: 'NEWKEY1',
    OLDKEY2: 'NEWKEY2',
    OLDKEY3: 'NEWKEY3'
  };
  
// function to replace old keys with new keys according to the map
const replaceOldKeys = (obj, keyMap) => Object.keys(obj)
    .reduce((result, currentKey) => Object.assign(result, { [keyMap[currentKey]]: obj[currentKey] }), {});
  
// looping through the data array and applying key replacement using the above function
const newData = data.map(item => replaceOldKeys(item, mapKeys));

console.log(newData)

Modify the key within an array of objects that share a common key

Answer №1

Answer №2

Similar questions

Maintain the structure of ajax POST requests and display a real-time feed of

AngularJS function orderBy reverses the array instead of sorting it

Using Typescript: accessing all properties from a specified type while excluding one

Solution: "The Mongoose Model.find method consistently provides an empty result set."

Tips for concealing JavaScript files from the Chrome Developer Tools while using Next.js

Issue: The `libsass` component could not be located

Problem encountered with the JavaScript for loop failing to execute consistently on each iteration

Issue encountered: Next.js has failed to hydrate properly due to a discrepancy between the initial UI and server-rendered content

Adaptable images - Adjusting image size for various screen dimensions

JavaScript implementation of a carousel slider with responsive design

Can you provide a succinct explanation of what constitutes a well-defined "landing page"?

Upon hitting submit, the form remains unresponsive

Returning to the previous page

Webpack loaders or plugins: understanding the distinction

Hold off on progressing until the http.get request in Angular 4 has completed

What is the best approach to managing a Symfony form that contains TWO CollectionType child forms?

Prevent multiple requests on jQuery infinite scrolling

"Exploring the possibilities of Ajax in conjunction with Sol

Angular: Showing the Gap between Basic Elements within an Array in the Template

Using the `forEach` method nested within another `forEach