How can I pull a date in cell from spreadsheet to my HTML
Question
Could you please help me pull a row of data in a spreadsheet to the HTML form using google app script?
The code and HTML I found and I am using are further below.
My spreadsheet looks like this (Bob and Mary have not reserved a flight yet):
name, from city, to city, flight date Bob, Atlanta, Tokyo, , John, New York, Paris, 11/08/2020 Mary, Chicago, Berlin, ,
In the HTML, I am entering the search term, a name, which is residing in the first column of the spreadsheet. The row where the name is matching, is supposed to be pulled into the HTML.
This works for Bob and Mary, who do not have a date in their row. however, the row of John is not passed to HTML, as the date is causing some problems.
I tried JSON.stringify and new Date () to make the date passed into HTML; but to no avail. Although I searched the site, have not been able to resolve from the searches.
$('#box3').val(sObj.box3);
not working when sObj.box3 is a date from spreadsheet.
Any help will be much appreciated. Please note I am quite new to coding, thanks in advance for the replies and your understanding. I share below the spreadsheet and the web app page: spreadsheet
function findNeedleInHaystack(sObj) {
var sObj=sObj||{};
sObj.column=sObj.column||1;
sObj.needle=sObj.needle||22;
sObj.haystack=sObj.haystack||'Sheet1';
sObj.startrow=sObj.startrow||2;
sObj.id=sObj.id||'16q1lFaLsZEZeImlkjaQNgCaAyA3ZS0QSrEO4dn872uc';
sObj.found="No results ";
var ss=SpreadsheetApp.openById(sObj.id);
var sh=ss.getSheetByName(sObj.haystack);
var rg=sh.getRange(sObj.startrow,1,sh.getLastRow()-sObj.startrow+1,sh.getLastColumn());
var v=rg.getValues();
for(var i=0;i<v.length;i++) {
if(v[i][sObj.column-1]==sObj.needle) {
sObj.box1= v[i][sObj.column];
sObj.box2= v[i][sObj.column+1];
sObj.box3= v[i][sObj.column+2];
break;
}
}
return sObj;
}
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
And the HTML:
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<br>
<br /><input id="txt2" type="text" value="John" placeholder="Enter 'John' and hit search" />
<br><input id="box1" type="text" />
<br><input id="box2" type="text" />
<br /><input id="box3" />
<br />
<input type="button" value="Search" onClick="search();" />
<br>
<script>
function search() {
var s2=$('#txt2').val();
google.script.run
.withSuccessHandler(function(sObj){
$('#box1').val(sObj.box1);
$('#box2').val(sObj.box2);
$('#box3').val(sObj.box3);
})
.findNeedleInHaystack({needle:s2});
}
</script>
</body>
</html>
2 answers
solution1
1 ACCPTED 2020-05-24 22:19:18
How about this answer?
Modification points:
- In your script
findNeedleInHaystack()of Google Apps Script side,sObj.box3the date object. In this case, whensObjis returned to HTML side, it becomesnull. I think that this is the reason of your issue.
In order to avoid this issue, how about the following modification?
Modified script 1:
Please modify findNeedleInHaystack as follows.
From:
return sObj;
To:
return JSON.stringify(sObj);
And also, please modify HTML side as follows.
From:
google.script.run
.withSuccessHandler(function(sObj){
$('#box1').val(sObj.box1);
$('#box2').val(sObj.box2);
$('#box3').val(sObj.box3);
})
.findNeedleInHaystack({needle:s2});
To:
google.script.run
.withSuccessHandler(function(sObj){
sObj = JSON.parse(sObj) // <--- Added
$('#box1').val(sObj.box1);
$('#box2').val(sObj.box2);
$('#box3').val(sObj.box3);
})
.findNeedleInHaystack({needle:s2});
Modified script 2:
In this pattern, as a simple modification, please modify findNeedleInHaystack as follows.
From:
var v=rg.getValues();
To:
var v=rg.getDisplayValues();
Modified script 3:
In this modification, the date object is converted to the string. Please modify findNeedleInHaystack as follows.
From:
sObj.box3= v[i][sObj.column+2];
To:
sObj.box3= v[i][sObj.column+2].toISOString();
References:
solution2
0 2020-05-25 03:38:36
I've been trying for days. It feels as if I am rescued from being lost in a cave and You guided me out to the light:) I am grateful for your time and help:) Your suggestions worked perfectly for me, just that the below seems to be kept as it is in my situation:
sObj.box3= v[i][sObj.column+2];
So good to have your help, thank you again. Best regards
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.