JSON文件使用fetch到HTML表

发布于 2025-01-20 17:44:05 字数 867 浏览 2 评论 0原文

我想要一个 HTML 数据从 JSON 文件中获取数据。我正在使用 fetch，但我只是得到一张空白表。我查看了控制台，没有看到任何 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>

表 (HTML)

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

</tbody>

原文

I would like to have an HTML data fetch data from a JSON file. I am using fetch, but I am just getting a blank table. I looked in Console and do not see any CORS errors. What is preventing it from displaying the data?

Script

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

过期情话 2025-01-27 17:44:05

好吧，我明白你想要做什么，但你的代码似乎有点混乱。在另一个文件中使用 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 改变了数组本身。

Okay, I understood what you are trying to do but your code seems to be a little bit messy. It could be a good suggestion to work with your javascript in another file.
I used your way to show you how this could work.

<!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>

There are some mistakes.

You are receiving an object that contains rows and columns. That means that the objectData has atributes this way:

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

You were trying to access to objectData as an array when the array is row or columns. So you could use objectData.rows[index] or destructure as I did.