[英]JavaScript: How can I change property names of objects in an array?
I am using this react-select
: https://github.com/JedWatson/react-select我正在使用这个
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
.如果尝试在我的选项中使用
name
或value
,我会遇到在select-react
使用它们的问题。 If I change my name
to value
, the select options are populating, however I don't want to do that.如果我将
name
更改为value
,则会填充选择选项,但是我不想这样做。
Can anyone teach me how can I change my array's name
to value
?谁能教我如何将数组的
name
更改为value
?
You could use the .map()
function to make the data in columns
suitable for use with react-select
.您可以使用
.map()
函数使columns
的数据适合与react-select
。
The .map()
function is available on the Array
type. .map()
函数可用于Array
类型。 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()
有关更多信息, 请参阅
.map()
的 MDN 文档
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.如果您只想将
name
属性重命名为value
您可以使用map
并将name
属性破坏为value
并选择其余的。
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
.但是,我怀疑您会想要这个,因为
react-select
对title
不起作用(据我所知)。 It waits for a label
prop I guess.我猜它在等待
label
道具。 If this is so, go with and change all the properties as @Dacre Denny suggested.如果是这样,请按照@Dacre Denny 的建议更改所有属性。 I like arrow functions :) So:
我喜欢箭头函数 :) 所以:
const newColumns = columns.map( item =>
( { value: item.name, label: item.title } )
);
Use destructuring
with renaming property will simplify.使用具有重命名属性的
destructuring
将简化。
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.