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

pprl5pva  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(338)

我有两个数组,一个是简单数组,另一个是对象数组。
以下是阵列:-

arr1=["aadhar", "address", "email", "mobile", "name", "pancard", "voterid"];
arr2=[ {
            "id": 21,
            "name": "johndoe",
            "email": "hello@gmail.com",
            "address": "test address",
            "voterid": "12131313",
            "mobile": "1211313",
            "aadhar": "213123131313",
            "pancard": "HYG579AA"
        },
        {
            "id": 24,
            "name": "johndoe3",
            "email": "hello1@gmail.com",
            "address": "test address",
            "voterid": "12111313",
            "mobile": "1211313",
            "aadhar": "112313131313",
            "pancard": "YHUIHU88"
        }];

我想将arr2Map到arr1中,以使用第一个arr1获取值。这就是我所尝试的:

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

我希望项目Map如下:-

item.aadhar
item.address
item.email
item.mobile

and so on...

但我无法在dot之后使用itx或arr1,即item.itx(未使用itx)。
如果有什么办法,一定要告诉我。

ztyzrc3y

ztyzrc3y1#

也许这更具可读性。。。

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

q5lcpyga2#

不要将数据操作逻辑与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: "hello@gmail.com",address: "test address",voterid: "12131313",mobile: "1211313",aadhar: "213123131313",pancard: "HYG579AA"},{id: 24,name: "johndoe3",email: "hello1@gmail.com",address: "test address",voterid: "12111313",mobile: "1211313",aadhar: "112313131313",pancard: "YHUIHU88"}]

console.log(arr2.map(obj => pick(obj, arr1)))
[
  [
    "213123131313",
    "test address",
    "hello@gmail.com",
    "1211313",
    "johndoe",
    "HYG579AA",
    "12131313"
  ],
  [
    "112313131313",
    "test address",
    "hello1@gmail.com",
    "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: "hello@gmail.com",address: "test address",voterid: "12131313",mobile: "1211313",aadhar: "213123131313",pancard: "HYG579AA"},{id: 24,name: "johndoe3",email: "hello1@gmail.com",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: "hello@gmail.com",address: "test address",voterid: "12131313",mobile: "1211313",aadhar: "213123131313",pancard: "HYG579AA"},{id: 24,name: "johndoe3",email: "hello1@gmail.com",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>

相关问题