JavaScript: How can I change property names of objects in an array?

Question

I am using this react-select: https://github.com/JedWatson/react-select

The format for options data that they require is:

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry'},
    { value: 'vanilla', label: 'Vanilla' }
];

My array is set up differently as follows:

const columns = [
    { name: 'OrderNumber', title: 'Order Number' },
    { name: 'strawberry', title: 'Strawberry' },
    { name: 'vanilla', title: 'Vanilla' }
]

I am not able to change my array. If try to use name or value in my option items, I encounter issues using them with select-react. If I change my name to value, the select options are populating, however I don't want to do that.

Can anyone teach me how can I change my array's name to value?

Can't you transform your array and feed react-select somehow? — devserkan
– devserkan, Commented Aug 30, 2018 at 23:35

Dacre Denny · Accepted Answer · 2018-08-30 23:51:24Z

You could use the .map() function to make the data in columns suitable for use with react-select.

The .map() function is available on the Array type. It creates a new array from the array you call it on, and allows you to provide a function that transforms/changes each item as it is copied from the original array.

You can make use of it as follows:

const columns = [
    { name: 'OrderNumber', title: 'Order Number' },
    { name: 'strawberry', title: 'Strawberry' },
    { name: 'vanilla', title: 'Vanilla' }
]

const options = columns.map(function(row) {

   // This function defines the "mapping behaviour". name and title 
   // data from each "row" from your columns array is mapped to a 
   // corresponding item in the new "options" array

   return { value : row.name, label : row.title }
})

/*
options will now contain this:
[
    { value: 'OrderNumber', label: 'Order Number' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' }
];
*/

For more information, see the MDN documentation for .map()

devserkan · Accepted Answer · 2018-08-30 23:58:33Z

If you just want to rename the name property to value you can use a map and destruct the name property as value and pick the rest.

const columns = [
    { name: 'OrderNumber', title: 'Order Number' },
    { name: 'strawberry', title: 'Strawberry' },
    { name: 'vanilla', title: 'Vanilla' }
];

const newColumns = columns.map( item => {
  const { name: value, ...rest } = item;
  return { value, ...rest }
 }
);

console.log( newColumns );

But, I suspect that you would want this since react-select doesn't work (as far as I see) with title. It waits for a label prop I guess. If this is so, go with and change all the properties as @Dacre Denny suggested. I like arrow functions :) So:

const newColumns = columns.map( item =>
  ( { value: item.name, label: item.title } )
);

Siva Kondapi Venkata · Accepted Answer · 2020-06-16 16:31:44Z

5

Use destructuring with renaming property will simplify.

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" },
];

const columns = options.map(({ value: name, label: title }) => ({
  name,
  title,
}));

console.log(columns);

answered Jun 16, 2020 at 16:31

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

1 Comment

Kalnode Over a year ago

Clean; works great

Collectives™ on Stack Overflow

JavaScript: How can I change property names of objects in an array?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related