JavaScript change keys of some of the values in JavaScript and maintain other keys as same

Question

I am trying to change keys of some of the values in JavaScript and maintain other keys as same

this is what i tried

const xHeading = "State", yHeading = "Value";

//The key percentage can change dynamically

const data = [{name: "California", y: 1079, percentage: 14.97},
{name: "Florida", y: 874, percentage: 12.12},
{name: "Texas", y: 770, percentage: 10.68},
{name: "New York", y: 523, percentage: 7.25},
{name: "Arizona", y: 430, percentage: 5.96}];

// this is what i tried
  const exportData =   
    data.map((item) => {
      const { name, y, z, ...noA } = item;
      return data.map((item) => ({
        [xHeading]: name,
        [yHeading]: y,        
        ...noA,
      }));
    });

//output: The keys are changing but its creating multiple arrays

// Expected Output

[{State: "California", Value: 1079, percentage: 14.97},
{State: "Florida", Value: 874, percentage: 12.12},
{State: "Texas", Value: 770, percentage: 10.68},
{State: "New York", Value: 523, percentage: 7.25},
{State: "Arizona", Value: 430, percentage: 5.96}];

you're calling `.map` twice where you only need to call it once — Alnitak, Dec 29 '20 at 12:28

mr hr · Accepted Answer · 2020-12-29T12:51:31.183

1

You could use Array.prototype.map() method. Traverse the array using map method and change the required keys.

const data = [
  { name: 'California', y: 1079, percentage: 14.97 },
  { name: 'Florida', y: 874, percentage: 12.12 },
  { name: 'Texas', y: 770, percentage: 10.68 },
  { name: 'New York', y: 523, percentage: 7.25 },
  { name: 'Arizona', y: 430, percentage: 5.96 },
];
const xHeading = 'State';
const yHeading = 'Value';
const ret = data.map(({ name, y, ...rest }) => ({
  [xHeading]: name,
  [yHeading]: y,
  ...rest,
}));
console.log(ret);

edited Dec 29 '20 at 12:51

answered Dec 29 '20 at 12:21

mr hr

3,162
2
9
19

The OP knows about `.map` - they're just using it wrong. – Alnitak Dec 29 '20 at 12:29
@Alnitak, Sorry my mistake. I hadn't seen it. – mr hr Dec 29 '20 at 12:31
Thank you, This works good if xHeading and yHeading are not variables but directly added to `.map` function. but the xHeading and yHeading change based on data – Rizwan Ahmed Shivalli Dec 29 '20 at 12:48
@RizwanAhmedShivalli check the updated code. – mr hr Dec 29 '20 at 12:51

JavaScript change keys of some of the values in JavaScript and maintain other keys as same

1 Answers1