JSON 文件到 HTML Table 使用 Fetch

Question

我想要一个 HTML 数据从 JSON 文件中获取数据。我正在使用 fetch，但我只是得到一个空白 table。我查看了控制台，没有看到任何 CORS 错误。是什么阻止它显示数据？

脚本

<script>
fetch ("https://gsx2json.com/api?id=1Jvqj6ArHXr0lqW7LR4P2Y0M4i0egcGX-3Ah4PFp4rvA&sheet=Sheet1").then((data)=>{
  return data.json();
}).then((objectData)=>{
  console.log(objectData[0].title);
  let tableData="";
  objectData.map((values=>{
      tableData+='<tr>
        <td>${values.Bill}</td>
        <td>${values.Action}</td>
        </tr>';
  
  });
  document.getElementById("table_body").
  innerHTML=tableData;
})

</script>

Table (HTML)

  <table class="table">
<thead>
  <tr>
    <th>Bill</th>
    <th>Action</th>
  </tr>
</thead>
<tbody id="table_body">

</tbody>

Answer 1

好的，我明白你想做什么，但你的代码似乎有点乱。在另一个文件中使用 javascript 可能是个好建议。我用你的方式向你展示了这是如何工作的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <table class="table">
        <thead>
            <tr>
                <th>Bill</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="table_body">

        </tbody>

        <script>
            fetch("https://gsx2json.com/api?id=1Jvqj6ArHXr0lqW7LR4P2Y0M4i0egcGX-3Ah4PFp4rvA&sheet=Sheet1")
                .then(response => response.json())
                .then(({rows}) => {

                    console.log(rows);
                    let tableData = "";
                    rows.forEach((values => {
                        tableData += `
                        <tr>
                            <td> ${values.Bill}</td >
                            <td>${values.Action}</td>
                        </tr > `;

                    }))
                    document.getElementById("table_body").
                        innerHTML = tableData;
                })
                .catch(console.error)

        </script>
</body>

</html>

有些错误。

您收到一个包含行和列的对象。这意味着 objectData 具有这样的属性：

objectData : {
    columns: [],
    rows: []
}

当数组是行或列时，您试图将 objectData 作为数组访问。所以你可以像我一样使用 objectData.rows[index] 或解构。

我使用了 foreach 语句，因为 map 会更改数组本身。

JSON 文件到 HTML Table 使用 Fetch

JSON File to HTML Table Using Fetch

json

fetch