Google 表格数据应用程序脚本未在 WebApps 中显示值

Question

我在通过搜索功能将值从 Google Sheet 传递到我的 WebApps html 时遇到问题。我的 google 脚本文件设法查找该值并将其传递到一个数组中，但我的 javascript 文件无法将这些值传递回我的页面。

我是一个真正的编码初学者，在我学习的过程中尝试构建一个简单的应用程序。谁能指导我？

.js 文件：

//Retrieve Customer
function getCustomer() {
  
  var searchId = document.getElementById("search").value;
  
  if (searchId.length > 8){
    google.script.run.withSuccessHandler(custDetail).getCustDetail(searchId);
  } 
  
}

//Success Handler
function custDetail(cust){

  document.getElementById("idv-introducer").value = cust.custIntroducer;
  document.getElementById("idvname").value = cust.custName;
  document.getElementById("idv-id").value = cust.custId;
  document.getElementById("dob").value = cust.custDob;
  document.getElementById("nationality").value = cust.custNationality;
  document.getElementById("gender").value = cust.custGender;
  document.getElementById("marital").value = cust.custMarital;
  document.getElementById("address").value = cust.custAddress;
  document.getElementById("postalcode").value = cust.custPostal;
  document.getElementById("idvemail").value = cust.custEmail;
  document.getElementById("idvcontact").value = cust.custContact;
  document.getElementById("licensedate").value = cust.custLicense;
  document.getElementById("category").value = cust.custCategory;
  M.updateTextFields();
  
}

.gs 文件：

function getCustDetail(search) {
  
  var ss = SpreadsheetApp.openById(url);
  var ws = ss.getSheetByName("idvData");
  var idvCustData = ws.getRange(1,1,ws.getLastRow(),13).getValues();
  
  var custNameList = idvCustData.map(function(r){ return r[0]; });
  var custIdList = idvCustData.map(function(r){ return r[1]; });
  var custDobList = idvCustData.map(function(r){ return r[2]; });
  var custNationalityList = idvCustData.map(function(r){ return r[3]; });
  var custGenderList = idvCustData.map(function(r){ return r[4]; });
  var custMaritalList = idvCustData.map(function(r){ return r[5]; });
  var custAddressList = idvCustData.map(function(r){ return r[6]; });
  var custPostalList = idvCustData.map(function(r){ return r[7]; });
  var custEmailList = idvCustData.map(function(r){ return r[8]; });
  var custContactList = idvCustData.map(function(r){ return r[9]; });
  var custLicenseList = idvCustData.map(function(r){ return r[10]; });
  var custIntroducerList = idvCustData.map(function(r){ return r[11]; });
  var custCategoryList = idvCustData.map(function(r){ return r[12]; });
  
  var searchPostion = custIdList.indexOf(search);
  var custDetail = {};
  custDetail.custName = custNameList[searchPostion];
  custDetail.custId = custIdList[searchPostion];
  custDetail.custDob = custDobList[searchPostion];
  custDetail.custNationality = custNationalityList[searchPostion];
  custDetail.custGender = custGenderList[searchPostion];
  custDetail.custMarital = custMaritalList[searchPostion];
  custDetail.custAddress = custAddressList[searchPostion];
  custDetail.custPostal = custPostalList[searchPostion];
  custDetail.custEmail = custEmailList[searchPostion];
  custDetail.custContact = custContactList[searchPostion];
  custDetail.custLicense = custLicenseList[searchPostion];
  custDetail.custIntroducer = custIntroducerList[searchPostion];
  custDetail.custCategory = custCategoryList[searchPostion];
  Logger.log(searchPostion);
  Logger.log(custDetail);
  Logger.log(search);
  
  if (searchPostion > -1){
  
   return  custDetail;
   
  } else {
    return '-';
  
  }
}

我的日志确实捕获了这些值。我错过了什么吗？

html:

<!-- Header Start -->
          <div class="row">
            <div class="col s9">
                <h5>General Info</h5>
             
            </div>
            <div class="input-field col s3">
              <select id="category">
                <option value="" disabled selected>Select Option</option>
                <option value="MTP">Private</option>
                <option value="MTC">Commercial</option>
              </select>
              <label>Motor Category</label>
            </div>
          </div>
          <div class="row">
            <div class="col s9">
              <ul class="tabs">
                <li class="tab col s3 "><a href="#individual" class="grey-text text-darken-4">Individual</a></li>
                <li class="tab col s3"><a href="#corporate" class="grey-text text-darken-4">Corporate</a></li>
                
              </ul>
            </div>
            <div class="input-field col s3">
              <input id="search" type="search">
              <label for="search">Search ID</label>
              <i class="material-icons">close</i>
            </div>
          </div>
          <!-- Header End -->

          <!-- Individual Tab -->
            <form id="individual">
              <div class="row">
                <div class="input-field col s3 offset-s9">
                  <label for="idv-introducer">Introducer</label>  
                  <input id="idv-introducer" type="text" class="autocomplete">
                </div>
                <div class="input-field col s6">
                  
                  <label for="idvname">Insured Name</label>
                  <input id="idvname" type="text" class="validate">
                  <span class="helper-text" data-error="Required" data-success=""></span>
                </div>
                
                <div class="input-field col s3">
                  <input id="idv-id" type="text">
                  <label for="idv-id">NRIC / UEN</label>
                  <span class="helper-text" data-error="Required" data-success=""></span>
                </div>

                <div class="input-field col s3">
                  
                  <label for="dob">DOB (DD/MM/YYYY)</label>
                  <input type="text" id="dob" class="datepicker">
                  <span class="helper-text" data-error="Required" data-success=""></span>
                </div>
              
                <div class="input-field col s6">
                  <input id="nationality" type="text">
                  <label for="nationality">Nationality</label>
                </div>
                <div class="input-field col s3">
                  <select id="gender">
                    <option value="" disabled selected>Select Option</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                  </select>
                  <label>Gender</label>
                </div>
                <div class="input-field col s3">
                  <select id="marital">
                    <option value="" disabled selected>Select Option</option>
                    <?!= maritalList;?>
                  </select>
                  <label>Marital Status</label>
                </div>
              
            

                <div class="input-field col s9">
                  <textarea id="address" class="materialize-textarea"></textarea>
                  <label for="address">Address</label>
                </div>
                <div class="input-field col s3">
                  <label for="postalcode" >Postal Code</label>
                  <input id="postalcode" type="text" pattern="[0-9]{6}">
                  <span class="helper-text" data-error="wrong" data-success="right"></span>
                </div>
                <div class="input-field col s6">
                  <input id="idvemail" type="email" class="validate">
                  <label for="idvemail">Email</label>
                  <span class="helper-text" data-error="Invalid Email" data-success=""></span>
                </div>
                <div class="input-field col s3">
                  
                  <input id="idvcontact" type="text">
                  <label for="idvcontact">Contact No.</label>
                </div>
                <div class="input-field col s3">
                  <label for="licensedate">License (DD/MM/YYYY)</label>
                  <input type="text" class="datepicker" id="licensedate">
                  <span class="helper-text" data-error="Required" data-success=""></span>
                </div>
              <div class="right-align">
                 <button id="btn" class="btn waves-effect waves-light" name="action">Add</button>
              </div>
             </div>
            </form>

Answer 1

设置 HTML 元素的value，仅适用于某些标签（例如<input>）。

对于大多数 HTML 标签，您需要设置innerHTML。

示例：

document.getElementById("idv-introducer").innerHTML = cust.custIntroducer;

更新

另一个错误来源是将对象从服务器端传递到客户端。

可以通过在将对象从code.gs 函数传递到 Javascript 函数之前将对象包装成字符串来解决此问题。

对于这个替换

return custDetail;

与

JSON.stringify(custDetail);

在 Javascript 函数内function custDetail(cust)

定义

cust = JSON.parse(cust);.