用数组数据的 javascript 数组填充 html 表？

Question

I want to populate the html table with the array of array data format. i have write the code but my data is showing in single row. i have map the data in nested loop. so i unable to implement it properly. please suggest the solution.

my code:

import React from "react";
import "./App.css";


const data = {
  headers: ['Name', 'Country', 'City', 'Mobile', 'Salary', 'Date', 'PAN'],

  rows: [
    ['Maxwell', 'Australia', 'Sydney', '123', '$22', '02/02/89', 'yes'],
    ['Mark', 'Canada', 'Toronto', '056', '$8965', '12/06/02', 'no'],
    ['David', 'United Kingdom', 'London', '242', 'S23', '25/02/20', ''],
    ['Kohli', 'India', 'Delhi', '8956', '$32', '04/12/21', 'yes'],
    ['ABD', 'RSA', 'captown', '4515', '$32', '2/11/08', null],
  ],
};
const App = ({ states = {} }) => {
 
 
  return (
    <div>
<table style={{width:"100%"}}>
  <tr>
    {
      data.headers.map((head,i)=>(
        <th>{head}</th>
      ))
    }
   
  </tr>

{
  data.rows.map((row,j)=>(

    row.map((val)=>(
      <tr>
      <td>{val}</td>
     
  </tr>
    ))
  ))
}
</table>
    </div>
  );
};

export default App;

Answer 1

You need to move your <tr> element outside of the inner .map() call in order to make a single <tr> per inner array, and a <td> per element of that array.

{
  data.rows.map((row, j) => (
    <tr>
      {row.map((val) => (
        <td>{val}</td>
      ))}
    </tr>
  ))
}

 const data = { headers: ['Name', 'Country', 'City', 'Mobile', 'Salary', 'Date', 'PAN'], rows: [ ['Maxwell', 'Australia', 'Sydney', '123', '$22', '02/02/89', 'yes'], ['Mark', 'Canada', 'Toronto', '056', '$8965', '12/06/02', 'no'], ['David', 'United Kingdom', 'London', '242', 'S23', '25/02/20', ''], ['Kohli', 'India', 'Delhi', '8956', '$32', '04/12/21', 'yes'], ['ABD', 'RSA', 'captown', '4515', '$32', '2/11/08', null], ], }; const App = ({ states = {} }) => { return ( <div> <table style={{ width: "100%" }}> <tr> { data.headers.map((head, i) => ( <th>{head}</th> )) } </tr> { data.rows.map((row, j) => ( <tr> {row.map((val) => ( <td>{val}</td> ))} </tr> )) } </table> </div> ); }; ReactDOM.render( <App />, document.getElementById("root") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 2

Just return the <tr> in the outer .map and just the <td> in the inner .map :

{data.rows.map((row) => (
    <tr>
     {row.map((val) => <td>{val}</td>}
    </tr>
))}

This way you will loop values of inner arrays for each entry of the parent array.