Google Apps Script变量传递报错：getdatafromserver函数不存在求助

错误根源 #

你用google.script.run.withSuccessHandler(showData).getdatafromserver()尝试调用前端JS函数，但google.script.run仅能调用Code.gs中的服务器端函数，前端函数无法通过这个API触发，因此报错“getdatafromserver() is not a function”。

修正步骤 #

1. 调整前端点击事件逻辑 #

直接在点击事件中获取输入ID，调用服务器端的get_range_by_id函数，并用withSuccessHandler将返回结果传给showData，不需要额外的getdatafromserver函数。

2. 修复服务器端函数的索引错误 #

find_id函数中循环从i=1开始，但数组是0索引的，会跳过第一个ID；另外如果ID不存在返回字符串，get_range_by_id用字符串当数组索引会报错，需要修正索引逻辑。

3. 优化前端showData函数 #

处理空数据的情况，避免重复初始化DataTables导致的报错。

完整修正后的代码 #

Code.gs #

/*
# CREATED BY: BPWEBS.COM
*/

function doGet() {
    return HtmlService.createTemplateFromFile('Index').evaluate();
}

//GET DATA FROM GOOGLE SHEET AND RETURN AS AN ARRAY
function getData() {
    var spreadSheetId = "1jBmIDQgK8jQQrSCfaLe8Y6w1raUFBegAlwwkZT-TAN4";
    var dataRange = "data1!A2:G";

    var range = Sheets.Spreadsheets.Values.get(spreadSheetId, dataRange);
    var values = range.values;

    return values;
}

function read_id(){
    var spreadSheetId = "1jBmIDQgK8jQQrSCfaLe8Y6w1raUFBegAlwwkZT-TAN4";
    var IDRange = "data1!A2:A";
    var result_id = Sheets.Spreadsheets.Values.get(spreadSheetId, IDRange).values.flat(1);
    return result_id;
}

//INCLUDE JAVASCRIPT AND CSS FILES
function include(filename) {
    return HtmlService.createHtmlOutputFromFile(filename)
        .getContent();
}

function find_id(id1){ 
    var list_index = []
    var id_array = read_id()
    // 数组从0索引开始循环
    for(let i = 0; i < id_array.length; i++){
        if(id1 == id_array[i]){
            list_index.push(i)
        }
    }
    if(list_index.length > 0){
        return list_index.at(-1)
    }else{
        // 返回-1标记ID不存在，避免后续索引错误
        return -1
    }
}

function get_range_by_id(id1){
    var row_num = find_id(id1) 
    if(row_num === -1){
        return []
    }
    var range_data = [getData()[row_num]]
    return range_data
}

Index.html #

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
</head>

<body>
    <input id='id1' type="text" placeholder="input your id"> 
    <button id="btn_btn1"> GET ROW</button>
    <div class="container">
        <br>
        <div class="row">
            <table id="data-table" class="table table-striped table-sm table-hover table-bordered">
            </table>
        </div>
    </div>
</body>
<script>
  function showData(dataArray){
    // 销毁已存在的DataTable实例，避免重复初始化报错
    if($.fn.DataTable.isDataTable('#data-table')){
      $('#data-table').DataTable().destroy();
    }
    
    $(document).ready(function(){
      $('#data-table').DataTable({
        data: dataArray,
        columns: [
          {"title":"ID"},
          {"title":"Rating"},
          {"title":"Reviews"},
          {"title":"Book title"},
          {"title":"Number of Pages"},
          {"title":"Type"},
          {"title":"Price"}
        ],
        // 空数据时的友好提示
        language: {
          emptyTable: "未找到匹配的ID数据"
        }
      });
    });
  }

  document.getElementById('btn_btn1').addEventListener('click', function(){
    const inputId = document.getElementById('id1').value.trim();
    if(!inputId){
      alert('请输入ID');
      return;
    }
    // 直接调用服务器端函数，结果传给showData渲染
    google.script.run.withSuccessHandler(showData).get_range_by_id(inputId);
  })
</script>
</html>

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