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": "[email protected]",
            "address": "test address",
            "voterid": "12131313",
            "mobile": "1211313",
            "aadhar": "213123131313",
            "pancard": "HYG579AA"
        },
        {
            "id": 24,
            "name": "johndoe3",
            "email": "[email protected]",
            "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.

arr2.map(row => <tr key={row.id}>{arr1.map(item => <td key={row.id + '_' + item}>{row[item]}</td>)}</tr>) — secan
– secan, Commented Jul 8, 2021 at 15:46
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
– secan, Commented Jul 8, 2021 at 15:55
Does this answer your question? Dynamically access object property using variable — Heretic Monkey
– Heretic Monkey, Commented Jul 8, 2021 at 16:30

secan · Accepted Answer · 2021-07-08 15:52:01Z

1

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>
  )
});

answered Jul 8, 2021 at 15:52

secan

2,6771 gold badge9 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mulan · Accepted Answer · 2021-07-08 16:04:46Z

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

[
  [
    "213123131313",
    "test address",
    "[email protected]",
    "1211313",
    "johndoe",
    "HYG579AA",
    "12131313"
  ],
  [
    "112313131313",
    "test address",
    "[email protected]",
    "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: "[email protected]",address: "test address",voterid: "12131313",mobile: "1211313",aadhar: "213123131313",pancard: "HYG579AA"},{id: 24,name: "johndoe3",email: "[email protected]",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: "[email protected]",address: "test address",voterid: "12131313",mobile: "1211313",aadhar: "213123131313",pancard: "HYG579AA"},{id: 24,name: "johndoe3",email: "[email protected]",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>

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related