Javascript 使用JSON生成表

我有一个API端点，它会向我返回如下Google Sheets数据：

| App Id | Name    | Homepage    |
|--------|---------|-------------|
| 1      | Test    | example.com |
| 2      | Another | example.org |

[{'appid'：'1'，'Name'：'Test'，'Homepage'：'example.com'}，{'appid'：'2'，'Name'：'other'，'Homepage'：'example.org'}]

我正在使用以下代码使用axios获取上面的数据

axios.get（'http://127.0.0.1/')
。然后（（响应）=>{
console.log（response.data）；
});

我想用React中的数据做一个表。该表应如下所示：

| App Id | Name    | Homepage    |
|--------|---------|-------------|
| 1      | Test    | example.com |
| 2      | Another | example.org |

---

如何将这些数据呈现为上表所示的样子？

有几种方法可以实现您所需的功能

它可以使用纯html实现，并根据自己的方便引导设计

您必须将数据设置为您的状态，并在呈现数据时对其进行映射

---

上面的链接将带您进入bootstrap文档，您可以在其中找到与表相关的代码片段。

因此，正如前面所讨论的，您需要使用从rest api获得的数据构建表

这里可以将列设置为静态

App.js

import React, { useState, useEffect, Fragment } from "react";
import "./styles.css";
import axios from "axios";

export default function App() {
  const [data, setData] = useState([]);

  const columns = [
    { property: "id", header: "Id" },
    { property: "title", header: "Title" }
  ];

  useEffect(() => {
    const loadData = async () => {
      const response = await axios(
        "https://jsonplaceholder.typicode.com/todos/"
      );
      setData(response.data);
    };
    loadData();
  }, []);

  return (
    <Fragment>
      <table>
        <tr>
          {columns.map(col => (
            <th>{col.header}</th>
          ))}
        </tr>
        {data.map(datumn => {
          return (
            <tr>
              {columns.map(col => {
                return <td>{datumn[col.property]}</td>;
              })}
            </tr>
          );
        })}
      </table>
    </Fragment>
  );
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

样品

---

您可以通过添加错误和加载状态进行即兴创作。

请注意，网络上任何地方都不再允许对意见提出问题，这不是进行民意调查或主观讨论的地方questions@KrzysztofKrzeszewski很抱歉现在编辑我的问题。@g14u您想要一个像这样的普通表格，包含您得到的数据，如果是这样，将添加answer@DILEEPTHOMAS不，从RESTAPI获取的数据应该添加到表中。这是

[{'App Id'：'1'，'Name'：'Test'，'Homepage'：'example.com'}，{'App Id'：'2'，'Name'：'other'，'Homepage'：'example.org'}]

由于api没有公开，我将添加一个相同类型的答案示例，请检查您好，我不知道根据stackoverflow规则它是否正常，但是你能给出一个简单HTML的例子，或者对你的选择做出反应吗？