使用现代 Javascript 从 JSON 文件映射数组并将其推送到表上

Question

I'm trying to build a table from a JSON file using map in react, I've tried two ways, the first one using map and the second one using a for loop, but I got nothing.

I appreciate an ES6 based solution.

map:

const META =
[
  {
    "name": "CeloPunks Celo Connect Edition #377",
    "image": "https://ipfs.io/ipfs/QmRX4tFHKajU9nAxwHqJjkwtvBFCNRwJXNzdqrXUA16o3Z/377.png",
    "edition": 377
  }
];
const Data = META.map(vardata = () => {
  return (
  <div>
      <td>{vardata}</td>
  </div>
  )
});
console.log(Data);

for loop:

const DataAll = [];
for (let i=0; i<=META.lenght; i++){
  DataAll.push(META[i]);
};
console.log(DataAll);

How to create a table from a JSON file like META using modern javascript?

Answer 1

you may want something like this :

const Table = () => {
  const META = [
    {
      name: "CeloPunks Celo Connect Edition #377",
      image:
        "https://ipfs.io/ipfs/QmRX4tFHKajU9nAxwHqJjkwtvBFCNRwJXNzdqrXUA16o3Z/377.png",
      edition: 377,
    },
  ];

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Image</th>
          <th>Edition</th>
        </tr>
      </thead>
      <tbody>
        {META.map(({ name, image, edition }) => (
          <tr key={name}>
            <td>{name}</td>
            <td>{image}</td>
            <td>{edition}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Table;

This is just a table with one line and a header, but if you change your META variable, it will loop through the array to display each line… For example with this array :

  const META = [
    {
      name: "First Edition #1",
      image: "https://first-link",
      edition: 1,
    },
    {
      name: "Second Edition #2",
      image: "https://second-link",
      edition: 2,
    },
    {
      name: "Third Edition #3",
      image: "https://third-link",
      edition: 3,
    },
  ];

Answer 2

I think you like this below:

 const Table = () => { const META = [ { name: "CeloPunks Celo Connect Edition #377", image: "https://ipfs.io/ipfs/QmRX4tFHKajU9nAxwHqJjkwtvBFCNRwJXNzdqrXUA16o3Z/377.png", edition: 377, }, { name: "CeloPunks Celo Connect Edition #378", image: "https://pbs.twimg.com/profile_images/1440251297538527243/XQLuZvwr_400x400.png", edition: 378, }, { name: "CeloPunks Celo Connect Edition #379", image: "https://cdn.cyberbox.art/cpunk/14.png", edition: 379, }, ]; return ( <table style={{width:'100%'}}> <thead> <tr> <th>Name</th> <th>Image</th> <th>Edition</th> </tr> </thead> <tbody> {META.map(item => ( <tr key={name}> <td>{item.name}</td> <td><img src={item.image} /></td> <td>{item.edition}</td> </tr> ))} </tbody> </table> ); }; ReactDOM.render(<Table />, document.getElementById('root'))

 img{ width: 100px; } table, th, td { border:1px solid black; }

 <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> <div id='root'></div>