How to use map within a map in javascript to access particular element

Question

I have two array one is a simple array and the another is the array of objects.

Here is the arrays:-

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"
        }];

I want to map arr2 within arr1 to get the value using the first arr1. This is what I tried :

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

I want the item to be mapped like this:-

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

and so on...

but I am unable to use the itx or arr1 after dot i.e item.itx (itx is not being used).

Do let me know if there is any way to do this.

Basically you got the nested map() right but you have to use the square brackets notation (`item[itx]`) instead of the dot notation (`item.itx`) because `itx` is a variable, not the name of a property of the object. — secan, Jul 08 '21 at 15:55
Does this answer your question? [Dynamically access object property using variable](https://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable) — Heretic Monkey, Jul 08 '21 at 16:30

score 1 · Accepted Answer · answered Jul 08 '21 at 15:52

Maybe this is more readable...

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

Mulan · Answer 2 · 2021-07-08T16:04:46.303

Don't tangle data manipulation logic with React component layout logic. Write a separate pick(obj, fields) function -

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"
  ]
]

Now you can easily write your table -

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

Here is a complete example you can run and verify in your own browser -

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>

Here's an alternative example which includes the column headers -

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>

How to use map within a map in javascript to access particular element

2 Answers2