Google 表格到 Json 数据实时更新，无需刷新网站页面答案

【问题标题】：Google Sheet to Json Data Live Update Without Refresh Website PageGoogle 表格到 Json 数据实时更新，无需刷新网站页面
【发布时间】：2021-03-04 12:21:24
【问题描述】：

这个函数运行良好。

我在寻找什么

如果有人在不重新加载网页的情况下更新 google sheet 上的数据，则更新任何语言的 DOM 元素帮助。

我正在使用 google sheet json 文件

https://spreadsheets.google.com/feeds/list/1XaFRnQfNPRP86UPNcdgQuCCH6AeVe5FZOxBHaIPZDpM/od6/public/values?alt=json

var myData = [];

// an example function that will get the data by index so it can be used however you want
function showDetails(index) {
   var selectedData = myData[index];
   alert(JSON.stringify(selectedData, null, 2));
}

$.getJSON("https://spreadsheets.google.com/feeds/list/1XaFRnQfNPRP86UPNcdgQuCCH6AeVe5FZOxBHaIPZDpM/od6/public/values?alt=json", function(data) {

            myData = []; // reset whenever data loads
            var sheetData = data.feed.entry;

            var i;
            for (i = 0; i < sheetData.length; i++) {

                var dataPoint = {
                  name: data.feed.entry[i]['gsx$slipno']['$t'],
                  id: data.feed.entry[i]['gsx$id']['$t'],
                  clientname: data.feed.entry[i]['gsx$clientname']['$t'],
                  delivery: data.feed.entry[i]['gsx$delivery']['$t']
                };
                myData.push(dataPoint); // add data point to array to reference later

                // var email = data.feed.entry[i]['gsx$email']['$t'];
                // var delivery = data.feed.entry[i]['gsx$delivery']['$t'];

                document.getElementById('demo').innerHTML +=
                    ('<tr class="dd d-flex justify-content-around">' +
                        '<td>' +
                        " <span id='" + 't' + dataPoint.id + "'>" + dataPoint.name + '</span>' +
                        '<span class="cn" onclick="showDetails(' + i + ');">' + dataPoint.clientname + '</span>' +
                        '</td>' +
                        '<td class="ml-auto gg" onclick="showDetails(' + i + ');">' +
                        '</td>' +
                        '</tr>');
            }
        });

tbody>tr>td>span {
                    text-align: left;
                    display: block;
                }
                
                .dd {
                    border-bottom: rgb(202, 202, 202) solid 1px;
                    display: block;
                }
                
                .cn {
                    font-weight: 700;
                }
                
                .gg::before {
                    content: ">";
                }

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <a class="navbar-brand" href="#"> brand</a>
            <ul class="navbar-nav  mt-2 mt-lg-0">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container text-center my-4">

        <!-- Table  -->
        <table class="table " id="testTable">
            <!-- Table head -->
            <thead>
                <tr>
                    <th>Google Sheet Data</th>
                </tr>
            </thead>
            <!-- Table head -->
        
            <!-- Table body -->
            <tbody id="demo">


            </tbody>
            <!-- Table body -->
        </table>
        <!-- Table  -->

    </div>



</body>

</html>

【问题讨论】：

标签： javascript jquery json ajax google-apps-script

【解决方案1】：

您可以在 setInterval 循环中运行 $.getJSON 函数来轮询 Google 表格文档以进行更改。

下面会每秒检查一次更新

setInterval(function () {$.getJSON(.....)}, 1000)

【讨论】：

它不工作。如果可能的话，你能在这段代码中设置这个功能吗？
你能提供比not working更多的细节吗？什么不工作？什么是错误信息等
可能是语法问题。我无法正确实施，你能在你的答案中举个例子吗？
您实际上只是将$.getJSON(.....) 替换为上面的那个巨大的$.getJSON，如果它以前工作过，它会在这里工作，但只是每秒运行一次而不是一次
感谢您的努力，也许我做错了什么。它不断地在 DOM 中逐节添加数据。您可以在答案中添加正确的 sn-p 吗？并愉快地结束这次谈话:)