如何在javascript中使用映射中的映射来访问特定元素

Question

我有两个数组，一个是简单数组，另一个是对象数组。

以下是阵列：-

arr1=["aadhar", "address", "email", "mobile", "name", "pancard", "voterid"];

arr2=[ {
"id": 21,
"name": "johndoe",
"email": "[e-mail]",
"address": "test address",
"voterid": "12131313",
"mobile": "1211313",
"aadhar": "213123131313",
"pancard": "HYG579AA"
},
{
"id": 24,
"name": "johndoe3",
"email": "[e-mail]",
"address": "test address",
"voterid": "12111313",
"mobile": "1211313",
"aadhar": "112313131313",
"pancard": "YHUIHU88"
}];

我想在arr1中映射arr2，以使用第一个arr1获得值。这就是我尝试的：

{arr2.map((item) => {
return (
<Tr key={item.id}>
{arr1.map((itx) => {
return <Td>{item.itx}</Td>;
})}
}

我希望项目映射如下：-

item.aadhar
item.address
item.email
item.mobile
and so on...

但我无法使用点后的itx或arr1即item.itx(itx未被使用(。

如果有什么办法的话，一定要告诉我。

Answer 1

也许这更可读。。。

arr2.map(row => {
return (
<tr key={row.id}>
{
arr1.map(item => {
return (
<td key={`${row.id}_${item}`}>
{row[item]}
</td>
)
})
}
</tr>
)
});

Answer 2

不要将数据操作逻辑与React组件布局逻辑纠缠在一起。编写一个单独的pick(obj, fields)函数-

const pick = (obj = {}, fields = []) =>
fields.map(f => obj[f])
const arr1 = ["aadhar", "address", "email", "mobile", "name", "pancard", "voterid"]
const arr2 = [{id: 21,name: "johndoe",email: "[e-mail]",address: "test address",voterid: "12131313",mobile: "1211313",aadhar: "213123131313",pancard: "HYG579AA"},{id: 24,name: "johndoe3",email: "[e-mail]",address: "test address",voterid: "12111313",mobile: "1211313",aadhar: "112313131313",pancard: "YHUIHU88"}]

console.log(arr2.map(obj => pick(obj, arr1)))

[
[
"213123131313",
"test address",
"[e-mail]",
"1211313",
"johndoe",
"HYG579AA",
"12131313"
],
[
"112313131313",
"test address",
"[e-mail]",
"1211313",
"johndoe3",
"YHUIHU88",
"12111313"
]
]

现在你可以很容易地写你的表-

const rows = arr2.map(obj => pick(obj, arr1))
return <table>
{rows.map(row =>
<tr>{row.map(cell => <td>...</td>)}</tr>
)}
</table>

这里有一个完整的例子，你可以在自己的浏览器中运行和验证-

const pick = (obj = {}, fields = []) =>
fields.map(f => obj[f])
function Table ({ rows, selector }) {
return <table>
{rows.map((row, key) =>
<tr key={key}>
{selector(row).map((cell, key) =>
<td key={key}>{cell}</td>
)}
</tr>
)}
</table>
}
const arr1 = ["aadhar", "address", "email", "mobile", "name", "pancard", "voterid"]
const arr2 = [{id: 21,name: "johndoe",email: "[e-mail]",address: "test address",voterid: "12131313",mobile: "1211313",aadhar: "213123131313",pancard: "HYG579AA"},{id: 24,name: "johndoe3",email: "[e-mail]",address: "test address",voterid: "12111313",mobile: "1211313",aadhar: "112313131313",pancard: "YHUIHU88"}]
ReactDOM.render(
<Table rows={arr2} selector={x => pick(x, arr1)}/>,
document.querySelector("main")
)

table { border: 1px solid black; }
td { border: 1px solid silver; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<main></main>

这里有一个包含列标题的替代示例-

const pick = (obj = {}, fields = []) =>
fields.map(f => obj[f])
function Table ({ rows, cols }) {
return <table>
<tr>
{cols.map((col, key) =>
<th key={key}>{col}</th>
)}
</tr>
{rows.map((row, key) =>
<tr key={key}>
{pick(row, cols).map((cell, key) =>
<td key={key}>{cell}</td>
)}
</tr>
)}
</table>
}
const arr1 = ["aadhar", "address", "email", "mobile", "name", "pancard", "voterid"]
const arr2 = [{id: 21,name: "johndoe",email: "[e-mail]",address: "test address",voterid: "12131313",mobile: "1211313",aadhar: "213123131313",pancard: "HYG579AA"},{id: 24,name: "johndoe3",email: "[e-mail]",address: "test address",voterid: "12111313",mobile: "1211313",aadhar: "112313131313",pancard: "YHUIHU88"}]
ReactDOM.render(
<Table rows={arr2} cols={arr1} />,
document.querySelector("main")
)

table { border: 1px solid black; }
th,td { border: 1px solid silver; }
th { font-weight: bold; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<main></main>