changing the name of a key in an array of objects with javascript

Question

changing the name of a key in an array of objects with javascript

I have an array of objects with keys and values as follows:

let input = [
    { "b1": [ 1, 0 ] },
    { "b2": [ 1, 6 ] },
    { "total": [ 0, 4 ] },
    { "b3plus": [ 0, 2 ] }
]

I want to rename the keys of this array of objects so that the final output looks like this:

let output = [
    { "B1": [ 1, 0 ] },
    { "B2": [ 1, 6 ] },
    { "Total": [ 0, 4 ] },
    { "B3+": [ 0, 2 ] }
]

The code I tried is as follows:

const output = input.map(({
  b1: B1,
  b2: B2,
  b3plus: B3plus,
  total: Total,

  ...rest
}) => ({
  B1,
  B2,
  B3plus, 
  Total, 
  ...rest
}));

However, this code is not successful because renaming B3+ causes an error during compilation. Even if I skip renaming b3plus, the output is not as expected because undefined objects are added. Can someone help me identify where I am making a mistake?

Here is the error https://i.sstatic.net/nbGG97PN.png

If I do not rename b3Plus and proceed with renaming the other keys, I see unnecessary undefined objects. How can I avoid including those undefined objects?

https://i.sstatic.net/jt7nkG1F.png

javascript arrays json loops iterator

Answer 1

Answer №1

One approach is to use an object for the replacements and map the individual objects with the updated properties.

const
    input = [{ "p1": [ 1, 0 ] }, { "p2": [ 1, 6 ] }, { "total": [ 0, 4 ] }, { "p3plus": [ 0, 2 ] }],
    replacements = { p1: 'P1', p2: 'P2', total: 'Total', p3plus: 'P3+' },
    result = input.map(o => Object.fromEntries(Object
        .entries(o)
        .map(([k, v]) => [replacements[k] || k, v])
    ));

console.log(result);

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

Answer 2

One approach is to use an object for the replacements and map the individual objects with the updated properties.

const
    input = [{ "p1": [ 1, 0 ] }, { "p2": [ 1, 6 ] }, { "total": [ 0, 4 ] }, { "p3plus": [ 0, 2 ] }],
    replacements = { p1: 'P1', p2: 'P2', total: 'Total', p3plus: 'P3+' },
    result = input.map(o => Object.fromEntries(Object
        .entries(o)
        .map(([k, v]) => [replacements[k] || k, v])
    ));

console.log(result);

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

Answer 3

Answer №2

You are unable to change the name of the deconstructed p3plus variable to P3+ because the plus sign (+) is not allowed in a variable name.

To assign it, you should use: { 'P3+': p3plus }

const input = [
  { "p1"     : [ 1, 0 ] },
  { "p2"     : [ 1, 6 ] },
  { "total"  : [ 0, 4 ] },
  { "p3plus" : [ 0, 2 ] }
];

const output = input.map(({
  p1: P1,
  p2: P2,
  p3plus, // Keep as `p3plus` for now...
  total: Total,
  ...rest
}) => ({
  P1,
  P2,
  'P3+': p3plus, // Re-key here, since the '+' is not a valid variable name
  Total, 
  ...rest
}));

console.log(...output.map(JSON.stringify));

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

Below is an amended version of Nina's code to enhance clarity:

const renameKeys = (objArr, keyReplacements) => {
  return objArr.map(obj => {
    const entries = Object.entries(obj)
      .map(([originalKey, originalValue]) => [
        keyReplacements[originalKey] ?? originalKey,
        originalValue
      ]);
    return Object.fromEntries(entries); // Back to object
  });
};

const input = [
  { "p1"     : [ 1, 0 ] },
  { "p2"     : [ 1, 6 ] },
  { "total"  : [ 0, 4 ] },
  { "p3plus" : [ 0, 2 ] }
];

const replacements = {
  p1     : 'P1',
  p2     : 'P2',
  total  : 'Total',
  p3plus : 'P3+'
};

const output = renameKeys(input, replacements);

console.log(...input.map(JSON.stringify));  // Before
console.log(...output.map(JSON.stringify)); // After

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

Answer 4

You are unable to change the name of the deconstructed p3plus variable to P3+ because the plus sign (+) is not allowed in a variable name.

To assign it, you should use: { 'P3+': p3plus }

const input = [
  { "p1"     : [ 1, 0 ] },
  { "p2"     : [ 1, 6 ] },
  { "total"  : [ 0, 4 ] },
  { "p3plus" : [ 0, 2 ] }
];

const output = input.map(({
  p1: P1,
  p2: P2,
  p3plus, // Keep as `p3plus` for now...
  total: Total,
  ...rest
}) => ({
  P1,
  P2,
  'P3+': p3plus, // Re-key here, since the '+' is not a valid variable name
  Total, 
  ...rest
}));

console.log(...output.map(JSON.stringify));

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

Below is an amended version of Nina's code to enhance clarity:

const renameKeys = (objArr, keyReplacements) => {
  return objArr.map(obj => {
    const entries = Object.entries(obj)
      .map(([originalKey, originalValue]) => [
        keyReplacements[originalKey] ?? originalKey,
        originalValue
      ]);
    return Object.fromEntries(entries); // Back to object
  });
};

const input = [
  { "p1"     : [ 1, 0 ] },
  { "p2"     : [ 1, 6 ] },
  { "total"  : [ 0, 4 ] },
  { "p3plus" : [ 0, 2 ] }
];

const replacements = {
  p1     : 'P1',
  p2     : 'P2',
  total  : 'Total',
  p3plus : 'P3+'
};

const output = renameKeys(input, replacements);

console.log(...input.map(JSON.stringify));  // Before
console.log(...output.map(JSON.stringify)); // After

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

changing the name of a key in an array of objects with javascript

Answer №1

Answer №2

Similar questions

How to Use JQuery to Display Elements with a Vague Name?

Discord.js Discord bot error: 'gateway' down

Modify the width of the progress bar in Bootstrap using AngularJS

I encountered an error in the console stating, "Uncaught ReferenceError: req is not defined," while trying to access req.query.id

Different option for key press identification

Launch the file explorer using JavaScript/HTML

Submitting Forms with XMLHttpRequest

What is the best way to organize a Meteor codebase when incorporating external scripts?

What steps can a web developer take to view user console errors?

Error occurred within node while attempting to create a directory using mkdirsync

Cannot use MaterialUI Textfield/Input on iPhone devices

creating a post action using Node.js with Express and Angular

What is the best way to structure my JSON data?

Increasing the checkout date by one day: A step-by-step guide

Today's Date Bootstrap Form

Incorporating events into a calendar using JSON in IOS Titanium

Extract data from the HTML source code in JavaScript and transfer it to a personalized JavaScript variable within Google Tag Manager

Every time Lodash.uniqueId is called, it consistently generates the value of

Setting Start and End Dates in Bootstrap Vue Datepicker to Ensure End Date is After Start Date

I am unable to utilize the map function as it results in a TypeError: The property 'map' is undefined and cannot be read