无需刷新网站页面即可将Google Sheet转换为Json Data Live Update [英] Google Sheet to Json Data Live Update Without Refresh Website Page
本文介绍了无需刷新网站页面即可将Google Sheet转换为Json Data Live Update的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
此功能运行正常.
我在寻找什么
如果有人在不重新加载网页的情况下更新了Google表格上的数据，则更新了任何语言的DOM元素帮助.
If someone updates data on google sheet without reloading webpage update DOM element help of any language.
我正在使用Google工作表json文件
I'm using the google sheet json file
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>推荐答案
您可以在 setInterval 循环中运行 $.getJSON 函数，以查询Google表格文档中的内容变化.
You can run the $.getJSON function in a setInterval loop to poll the Google Sheets document for changes.
下面将每秒检查一次更新
The below will check once a second for updates
setInterval(function () {$.getJSON(.....)}, 1000)
这篇关于无需刷新网站页面即可将Google Sheet转换为Json Data Live Update的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
