零基础求助：从指定JSON URL取数据并在网页展示

嘿，别担心！我会用最直白的话一步步教你，完全不用懂JSON、Java、Ajax这些术语，跟着做就行～

第一步：创建网页文件 #

你只需要用电脑自带的记事本就能完成：

• 打开记事本（Windows：开始菜单搜“记事本”；Mac：用“文本编辑”，记得切换到纯文本模式）
• 把下面的完整代码复制粘贴进去
• 点击「文件」→「另存为」，文件名改成show-sheet-data.html，保存类型选「所有文件」，然后保存到桌面

<!DOCTYPE html>
<html>
<head>
    <title>我的表格数据展示</title>
    <!-- 浏览器标签上显示的标题 -->
    <style>
        /* 让表格看起来整洁一点的简单样式 */
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1 style="text-align:center;">我的Google Sheets数据</h1>
    <!-- 页面顶部的大标题 -->
    <div id="data-container" style="text-align:center;">正在加载数据...</div>
    <!-- 数据会显示在这里，加载中先提示文字 -->

    <script>
        // 这里放你的JSON网址，直接用你提供的就行
        const jsonUrl = "https://script.googleusercontent.com/macros/echo?user_content_key=RFP2beVz0BOAadC8lOHQi_-dajE5DI1oGW6ItREi66KTWjeP4twxaElm3krjtYa3QGuvmf_8gtYA-iMqW17UV8_5kB6YeGDjOJmA1Yb3SEsKFZqtv3DaNYcMrmhZHmUMWojr9NvTBuBLhyHCd5hHa1ZsYSbt7G4nMhEEDL32U4DxjO7V7yvmJPXJTBuCiTGh3rUPjpYM_V0PJJG7TIaKp5Mo6IQPCUHsaGMF-VMB9PySb3c...";

        // 下面的代码不用改，它会自动从网址拿数据并变成表格
        fetch(jsonUrl)
            .then(response => response.json())
            .then(data => {
                // 生成表格的HTML代码
                let tableHtml = '<table>';
                // 先做表头（第一行的列标题）
                tableHtml += '<tr>';
                Object.keys(data[0]).forEach(header => {
                    tableHtml += `<th>${header}</th>`;
                });
                tableHtml += '</tr>';
                // 再做每一行的数据
                data.forEach(row => {
                    tableHtml += '<tr>';
                    Object.values(row).forEach(cell => {
                        tableHtml += `<td>${cell}</td>`;
                    });
                    tableHtml += '</tr>';
                });
                tableHtml += '</table>';
                // 把表格放到页面上
                document.getElementById('data-container').innerHTML = tableHtml;
            })
            .catch(() => {
                // 如果加载失败，显示提示
                document.getElementById('data-container').innerHTML = '加载失败啦！请检查你的JSON网址有没有复制错～';
            });
    </script>
</body>
</html>

第二步：查看效果 #

• 找到你保存在桌面的show-sheet-data.html文件
• 双击它，会自动用浏览器打开，你就能看到表格数据啦！

注意事项 #

• 你的JSON网址必须是公开可访问的，如果Google Sheets设置了私有，别人打不开，这个网页也加载不了数据
• 如果加载失败，先检查网址有没有复制错，有没有多打空格或者少了字符
• 这个网页不用上传到服务器，本地打开就能用，非常方便

内容的提问来源于stack exchange，提问作者Johny Stark