Попытка получить данные из Google Sheets с использованием скрипта Google и отображение на веб-странице с горизонтальной вкладкой
Вам может понравиться попробовать операцию распространения
function fn(a,b,c){
console.log(a,b,c)
}
, и вы могли бы сделать
const paras = [1,2,3];
const myFun = fn.bind(null, ...paras)
Он выведет 1,2,3, когда вы вызываете myFun()
Однако он работает только для массива.
Если вы ищете решение для типа сопоставления значений ключа, вам может потребоваться написать функцию клей, которая преобразует значение в массив.
Например, у вас есть тип объекта
const paras = {b:1, a:2, c:3};
, вы можете преобразовать его в массив с помощью
const arrayParas = ['a','b','c'].map(field => paras[field])
И затем вы можете связать свою функцию
const myFun = fn.bind(null, ...arrayParas)
Редактировать: если вы не знаете, как подавать / как получить имя параметра из функции
Js имеет свою toString, которая преобразует функцию в строку, которая содержит входной параметр этой функции.
Но вам нужно убедиться, что имя входных параметров в функции точно совпадает с именами полей в объекте.
// get function parameter name
function getParameterNames(func) {
const STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;
const ARGUMENT_NAMES = /([^\s,]+)/g;
const fnStr = func.toString().replace(STRIP_COMMENTS, '');
const result = fnStr.slice(fnStr.indexOf('(') + 1, fnStr.indexOf(')')).match(ARGUMENT_NAMES);
if (result === null)
result = [];
return result;
}
//
function fn(a, b, c) {
console.log(a, b, c)
}
const paraObjs = {
c: 3,
a: 1,
b: 2
};
const fields = getParameterNames(fn);
const paraArray = fields.map(field => paraObjs[field]);
const myFun = fn.bind(null, ...paraArray)
myFun();2 ответа
Хорошо, ребята, проблема, связанная с невозможностью отображения, была решена, и вот код.
function fetchRushIv(officeName){
var spreadSheet = SpreadsheetApp.getActiveSpreadsheet();
var currSheet = spreadSheet.getSheetByName('OG_Database');
currSheet.activate();
var data = currSheet.getRange(5, 1, currSheet.getLastRow(),
currSheet.getLastColumn()).getValues();
var html="<style>th,td{border:1px solid #000;padding:5px;}</style>
<table>";;
for(var i=0;i<data.length;i++){
if(data[i][0]=="Office Name" || data[i][0]==officeName){
html+='<tr>';
for(var j=0;j<data[1].length;j++){
html += "<td>"+data[i][j]+"</td>";
}
html+= "</tr>";
}
}
html += "</table>"
return html ;
}
HTML-часть с исправленной ошибкой выглядит следующим образом:
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "block";
google.script.run.withFailureHandler(failed).
withSuccessHandler(displayData).fetchRushIv(cityName);
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active","");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
function displayData(table){
document.getElementById('customers').innerHTML=table;
}
function failed(e){
alert("error:"+e);
}
</script>
Попробуйте эту функцию:
function fetchRushIv(officeName){
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('OG_Database');
var data=sh.getRange(5,1,sh.getLastRow(),sh.getLastColumn()).getValues();
var html="<style>th,td{border:1px solid #000;padding:5px;}</style><table>";
for(var i=0;i<data.length;i++){
if(data[i][0]=="Office Name" || data[i][0]==officeName){//I had trouble figuring out what you were doing here so this may be wrong
html+='<tr>';
for(var j=0;j<data[i].length;j++){
html+="<td>"+data[i][j]+"</td>";
}
html+="</tr>";
}
}
html+="</table>";
return html;
}
Это намного более простая версия вашего HTML. Получите это в первую очередь, и вы можете добавить остальные стили позже.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function(){//this will run as soon as your DOM loads and that should load your table
google.script.run
.withSuccessHandler(function(hl){
document.getElementById('customers').innerHTML=hl;
})
.fetchRushIv();
})
console.log('MyCode');
</script>
</head>
<body>
<div id="customers"></div>
</body>
</html>
Вам все еще придется тестировать и отлаживать, но я думаю, что это немного ближе к работе. Я надеюсь, что вы знаете, как использовать console.log для отладки кода.