[英]JavaScript Map function to use generic keys within array of objects
I have the following array of objects:我有以下对象数组:
[
{
"job_id": 1,
"job_name": "Engineer"
},
{
"job_id": 2,
"job_name": "Scientist"
},
{
"job_id": 3,
"job_name": "Teacher"
}
]
where the following code is used to construct a Material-UI Select - options here is the above array of objects:其中以下代码用于构造 Material-UI Select - 这里的选项是上面的对象数组:
{options.map(option => {
return (
<MenuItem key={option.job_id} value={option.job_id}>
{option.job_name}
</MenuItem>
)
})}
My questions is, in order to not tie it down to actual key names of option.job_id and option.job_name as I am looking at using different datasets with different key names, but always following this key value pair format - can the map function be changed to make it more generic as to not worry about key names but still return the data for the Select dropdown, ie:我的问题是,为了不将其绑定到option.job_id和option.job_name的实际键名,因为我正在查看使用具有不同键名的不同数据集,但始终遵循此键值对格式 - map function 可以更改为使其更通用,无需担心键名,但仍返回 Select 下拉列表的数据,即:
{options.map(option => {
return (
<MenuItem key={option.generic_id} value={option.generic_id}>
{option.generic_name}
</MenuItem>
)
})}
I guess I am asking whether it's possible to access the object keys via the map function without needing to know job_id
and job_name
?我想我在问是否可以通过 map function 访问 object 密钥而不需要知道job_id
和job_name
?
If you can't make the keys more generic upstream, you can do one of two things如果你不能让上游的键更通用,你可以做两件事之一
import { pipe, mapKeys } from 'utils';
const normaliseOption = mapKeys(key =>
key.match(/_id$/) ? 'id'
: key.match(/_name$/) ? 'name'
: key
);
options.map(pipe(normaliseOption, option =>
<MenuItem key={option.id} value={option.id}>
{option.name}
</MenuItem>
));
// utils
export const pipe = (...fns) => fns.reduce(
(f, g) => x => g(f(x))
);
export const mapKeys = f => pipe(
Object.entries,
x => x.map(([k, v]) => [f(k), v]),
Object.fromEntries
);
1.bis) Somewhere upstream, where you know for sure you are dealing with jobs, you can do the above without the regexp. 1.bis) 在上游的某个地方,您确定自己正在处理工作,您可以在没有正则表达式的情况下执行上述操作。
options.map(option =>
<MenuItem key={option.getId()} value={option.getId()}>
{option.getName()}
</MenuItem>
);
// somewhere you know you are dealing with jobs
import JobOption from './JobOption';
const options = jobs.map(JobOption.of);
export default class JobOption {
constructor({job_id, job_name}) {
this.id = job_id;
this.name = job_name;
}
static of (descriptor) { return new JobOption(descriptor); }
getId () { return this.id; }
getName () { return this.name; }
}
If you want to be able to use dynamic object keys, it sounds like you want some kind of helper function that can take in the array and the relevant keys and return your menu items如果您希望能够使用动态 object 键,听起来您需要某种帮助器 function 可以接收数组和相关键并返回您的菜单项
For example例如
const menuBuilder = (options, keyProp, labelProp) => options.map(option => (
<MenuItem key={option[keyProp]} value={option[keyProp]}>
{option[labelProp]}
</MenuItem>
))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.