Guide to utilizing nested map functions in JavaScript to retrieve specific elements

Question

Guide to utilizing nested map functions in JavaScript to retrieve specific elements

I have two arrays: one is a simple array, and the other is an array of objects.

Here are the arrays:-

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

arr2=[ {
            "id": 21,
            "name": "johndoe",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="721a171e1e1d32151f131b1b5c111d1b">[email protected]</a>",
            "address": "test address",
            "voterid": "12131313",
            "mobile": "1211313",
            "aadhar": "213123131313",
            "pancard": "HYG579AA"
        },
        {
            "id": 24,
            "name": "johndoe3",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f49c9198989bc5b49399959d98da979b99">[email protected]</a>",
            "address": "test address",
            "voterid": "12111313",
            "mobile": "1211313",
            "aadhar": "112313131313",
            "pancard": "YHUIHU88"
        }];

I am trying to map arr2 within arr1 to retrieve the values using elements from arr1. Here is my attempt:

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

I want the items to be mapped like this:-

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

and so on...

However, I am unable to use the itx or arr1 after the dot notation, i.e., item.itx (itx is not being utilized).

Please let me know if there is any workaround for this issue.

javascript arrays jsx array-map

Answer 1

Answer №1

In my opinion, this version may be easier to understand...

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

Answer 2

In my opinion, this version may be easier to understand...

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

Answer 3

Answer №2

Separate your data manipulation logic from React component layout logic for better organization. Create a dedicated function called 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: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c64696060634c6b616d6560226f6361">[email protected]</a>",address: "test address",voterid: "12131313",mobile: "1211313",aadhar: "213123131313",pancard: "HYG579AA"},{id: 24,name: "johndoe3",email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2aa...
  
console.log(arr2.map(obj => pick(obj, arr1)))

[
  [
    "213123131313",
    "test address",
    "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa2afa6a6a58aada7aba3a6e4a9a5a7">[email protected]</a>",
    "1211313",
    "johndoe",
    "HYG579AA",
    "12131313"
  ],
  [
    "112313131313",
    "test address",
    "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d25282121227c0d2a202c2421632e2220">[email protected]</a>",
    "1211313",
    "johndoe3",
    "YHUIHU88",
    "12111313"
  ]
]

You can now easily construct your table like this -

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

Check out this complete example that you can test in your 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: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5ada0a9a9aa85a2a8a4aca9eba6aaa8">[email protected]</a>",address: "test address",voterid: "12131313",mobile: "1211313",aadhar: "213123131313",pancard: "HYG579AA"},{id: 24,name: "johndoe3",email...
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 another example with column headers included -

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: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c9c4cdcdcee1c6ccc0c8cd8fc2cecc">[email protected]</a>",address: "test address",voterid: "12131313",mobile: "1211313",aadhar: "213123131313",pancard: "HYG579AA"},{id: 24,name: "johndoe3",email...
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>

Answer 4

Separate your data manipulation logic from React component layout logic for better organization. Create a dedicated function called 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: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c64696060634c6b616d6560226f6361">[email protected]</a>",address: "test address",voterid: "12131313",mobile: "1211313",aadhar: "213123131313",pancard: "HYG579AA"},{id: 24,name: "johndoe3",email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2aa...
  
console.log(arr2.map(obj => pick(obj, arr1)))

[
  [
    "213123131313",
    "test address",
    "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa2afa6a6a58aada7aba3a6e4a9a5a7">[email protected]</a>",
    "1211313",
    "johndoe",
    "HYG579AA",
    "12131313"
  ],
  [
    "112313131313",
    "test address",
    "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d25282121227c0d2a202c2421632e2220">[email protected]</a>",
    "1211313",
    "johndoe3",
    "YHUIHU88",
    "12111313"
  ]
]

You can now easily construct your table like this -

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

Check out this complete example that you can test in your 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: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5ada0a9a9aa85a2a8a4aca9eba6aaa8">[email protected]</a>",address: "test address",voterid: "12131313",mobile: "1211313",aadhar: "213123131313",pancard: "HYG579AA"},{id: 24,name: "johndoe3",email...
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 another example with column headers included -

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: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c9c4cdcdcee1c6ccc0c8cd8fc2cecc">[email protected]</a>",address: "test address",voterid: "12131313",mobile: "1211313",aadhar: "213123131313",pancard: "HYG579AA"},{id: 24,name: "johndoe3",email...
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>

Guide to utilizing nested map functions in JavaScript to retrieve specific elements

Answer №1

Answer №2

Similar questions

Obtaining the value of an HTML span tag during execution on a PHP Webdriver client and Selenium can be achieved

Tips for dynamically updating data with on.click functions in D3

``Trouble with React Dropdown menu option selection"

Fixing the error message "reached end of file while parsing" in programming

Creating dynamic and asynchronous JSON structures with JavaScript

I'm unable to modify the text within my child component - what's the reason behind this limitation?

Is there a way to determine the remaining time or percentage until document.ready is reached?

Attempting to utilize a for loop in JavaScript to condense code, however encountering a "not defined" error

Is there a method available to retrieve the video duration prior to uploading it?

Steps for removing a p5.js instance once three.js assets have finished loading

What is the best way to retrieve the overall error status from the Material UI DataGrid?

Exploring the capabilities of ngWebDriver to interact with a dynamic ng-repeat through Selenium

Utilize JavaScript to randomly choose images as background tiles in HTML

Transitionend event fails to trigger when Chrome tab is not in focus

The result of combining two JavaScript variables

Showing a div with seamless elegance

Unable to retrieve the string contained within an element - JavaScript object literal

Animating a div to glide back and forth in Javascript - with a quirky little 'ear' twist

The Date object and ISO date object yield varying results in their date displays

Clicking on a link in HTML with the onclick event