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

Question

我正在尝试使用react中的map从JSON文件构建一个表，我尝试了两种方法，第一种使用map，第二种使用for循环，但没有得到任何结果。

我很欣赏基于ES6的解决方案。

地图：

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

循环：

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

如何使用现代javascript从JSON文件(如META )创建表？

Answer 1

你可能想要这样的东西：

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;

这只是一个有一行和一个头的表，但是如果您更改了元变量，它将遍历数组以显示每一行…。例如，使用此数组：

  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

我想你喜欢下面这个：

​

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>

​