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

Question

我正在尝试在反应中使用 map 从 JSON 文件构建一个 table，我尝试了两种方法，第一种使用 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);

for 循环：

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

如何使用现代 javascript 从 JSON 文件（如 META）创建 table？

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;

这只是一个包含一行的 table 和一个 header，但是如果您更改您的 META 变量，它将遍历数组以显示每一行……例如使用此数组：

  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>

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

Map an array from a JSON file using modern Javascript and push it on a table

javascript

arrays

reactjs

json

ecmascript-6