Can't parse json data in Html table - html

Able to call the url of my web service that is proved by eclipse console output.
But unable to parse it into HTML table. for a test purpose i write a windows.alert inside get.JSON function. but it does not work however the call is made to service as shown in image below:-
Can anyone help me for this.
Thanks.
after clicking on clickme button on webpage the console get printed: proof of webservice call:
code for HTML Page:-
<!DOCTYPE html>
<html>`enter code here`
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>item svc demo</title>
<p id="demo"></p>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
function myFunction(jQuery)
{
window.alert(5 + 6);
$.getJSON("http://localhost:8080/OnlineStore/kmsg/grocery/item",
function (data) {
window.alert(9 + 6);
}
);
};
$(document).ready(myFunction);
</script>
</head>
<body>
<table id="itemTable" border="2">
<tr>
<th>itemno</th>
<th>offerPercent</th>
<th>regQtyBuyLimit</th>
<th>offerQtyBuyLimit</th>
<th>minReOrderLevel</th>
<th>pkg</th>
<th>addedOn</th>
<th>updatedOn</th>
<th>mrp</th>
<td>regPrice</th>
<th>minBulkQty</th>
<th>bulkDiscount</th>
</tr>
</table><br /><br />
<button onclick="myFunction()">Click me</button>
</body>
</html>


Friends i Have solved this problem couple of weeks age. I am going to answer my own question hope this can help someone:
The function code given below:
function setSales(SalesRecord,type,xml)
{
var SalesRecordTable = document.getElementById("custorder2");
var SalesRecordTableHead = document.getElementById("head2");
var SalesRecordTableBody = document.createElement("tbody");
SalesRecordTableBody.appendChild(SalesRecordTableHead);
for(var i=0; i< SalesRecord.length; i++)
{
var row = document.createElement("tr");
SalesRecordTable.insertRow(-1);
var obj = SalesRecord[i];
var vSalesOrderNo = obj["salesOrderNo"];
var vMobileNo = obj["mobileNo"];
var vitemno = obj["itemNo"];
var vpkg = obj["pkg"];
var vitemQty = obj["itemQty"];
var vitemRate = obj["itemRate"];
var vaddedOn = obj["addedOn"];
var vupdatedOn = obj["updatedOn"];
var cell = document.createElement("td");
var cellText = document.createTextNode(vSalesOrderNo);
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td");
cellText = document.createTextNode(vMobileNo);
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td");
cellText = document.createTextNode(vitemno);
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td");
cellText = document.createTextNode(vpkg);
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td");
cellText = document.createTextNode(vitemQty);
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td");
cellText = document.createTextNode(vitemRate);
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td");
cellText = document.createTextNode(vaddedOn);
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td");
cellText = document.createTextNode(vupdatedOn);
cell.appendChild(cellText);
row.appendChild(cell);
SalesRecordTableBody.appendChild(row);
}
SalesRecordTable.appendChild(SalesRecordTableBody);
SalesRecordTable.setAttribute("border", "2");
}
// The JSON data is coming in the "SalesRecord" Parameter and customer2 is table id , head2 is row id, tbody is body of table.
Thanks.


this function like this in controller
public JsonResult LoadIndex()
{
var x = (from a in db.DLVTFaulties
select new DLVTFaultyInfo
{
Id = a.Id,
Explain = a.Explain
});
return new JsonResult { Data = x, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
program in the view that you want to show the table is
<script>
function LoadDLVTFaulty() {
$('#update_panel').html('Loading Data...');
var id = 0;
debugger;
$.ajax({
type: 'GET',
url: '/DLVTFaultyInfo/LoadIndex',
datatype: 'json',
success: function (d) {
if (d.length > 0) {
var $data = $('<table id = "Table"></table>').addClass('table table-responsive table-striped');
var header = "<thead><tr><th>Fault </th><th>Code </th><th></th></tr></thead>";
$data.append(header);
$.each(d, function (i, row) {
var $row = $('<tr/>');
$row.append($('<td/>').html(row.Explain));
$row.append($('<td/>').html(row.Id));
$row.append($('<td/>').html("<img id = \"edit\" src='/images/edit.png' title='Edit' onclick=\"EditFault(" + row.Id + ")\"/>"));
$row.append($('<td/>').html("<img id = \"delete\" src='/images/delete.png' title='Edit' onclick=DeleteFault(" + row.Id + ") />"));
$data.append($row);
});
$('#update_panel').html($data);
}
else {
var $noData = $('<div/>').html('no fault');
$('#update_panel').html($noData);
}
},
error: function (xhr, status, error) {
alert(error);
}
});
}
</script>
<div id='update_panel'></div>
i test it and work excellent in mvc

Related

Get Google sheets to updatable JSON script to only need Header row

I have inherited a Google sheet script that generates a Live updatable JSON link from sheets chosen from an HTML form in a sidebar
At the start of a project, the only data that might be present is the Headers on both the Element and Connection sheets (and they are always present) and as the project matures rows of data are added to one or both sheets
My issue is that the script to generate the json requires that at least two rows of data exist (on both sheets) the Header row and a data row
When you run the script you get a pop up with a link then you click that link and a new browser tab opens with the JSON data. It is at this step I get the error
Line 161 in the gs modual is properties.setProperty("settings", newProperties); from
function setExportProperties(newProperties){
var properties = PropertiesService.getDocumentProperties();
var prop = properties.getProperty("settings");
properties.setProperty("settings", newProperties);
}
But this is set on line 292 from the HTML module
function setProperties(){
return google.script.run.setExportProperties(generateProperties());
}
I have tried for hours to figure out how to modify the script so only the header row is necessary but I have not achieved this
There is a lot of code here and it seems to me too much to post it but it is well documented in the code and I think someone who knows what they are doing can figure out pretty easily what needs to be done
From the added menu click Open Sidebar to get to the form. I have set it up in advance
Thank you in advance for your help with this
gs code
//===================================================================================================================
//ExportJson Code
//===================================================================================================================
//Displays an HTML-service dialog in Google Sheets that contains client-side JavaScript code for the Google Picker API.
function showForm() {
var html = HtmlService.createHtmlOutputFromFile('Sidebar.html')
.setTitle('Export Sheet As JSON Data')
.setWidth(300)
.setHeight(480)
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi().showSidebar(html);
}
//function showData(elements,connections,headerrow,datarow,prefix,separator){
function showData(sheets,settings){
//Sheets Array
var elements=sheets[0];
var connections=sheets[1];
//Settings Array
var emptycells=settings[0];
var headerrow=settings[1];
var datarow=settings[2];
var prefix=settings[3];
var separator=settings[4];
var keepignore=settings[5];
var cellarrays=settings[6];
var separator2=settings[7];
var columnignore=settings[8];
var colprefix=settings[9];
var sheetid=SpreadsheetApp.getActiveSpreadsheet().getId();
if(elements=='' && connections==''){
Browser.msgBox('Select any one or both sheets and run again!');
return;
}
if(headerrow=='' || headerrow<=0){
Browser.msgBox('Please enter row number of your data header, it should be an integer value greater than 0');
return;
}
if(datarow=='' || datarow<=0){
Browser.msgBox('Please enter row number where data starts, it should be an integer value greater than 0');
return;
}
if(keepignore==true){
if(prefix=='' && separator!=''){
Browser.msgBox('Please Column Prefix And Array Separator');
return;
}
}
if(columnignore==true){
if(colprefix=='' || colprefix==false){
Browser.msgBox('Please Enter Column Prefix');
return;
}
}
if(cellarrays==true){
if(separator2=='' || separator2==false){
Browser.msgBox('Please Enter Array Separator');
return;
}
}
if(elements=='' && connections==''){
Browser.msgBox('Select sheet(s)!');
return;
}
var webappurl='https://script.google.com/macros/s/AKfycbwn.../exec';
webappurl=webappurl + '?id=' + sheetid;
if(elements!='')
webappurl=webappurl + '&sheet1=' + elements;
else
webappurl=webappurl + '&sheet1=' + '';
if(connections!='')
webappurl=webappurl + '&sheet2=' + connections;
else
webappurl=webappurl + '&sheet2=' + '';
webappurl=webappurl + '&header=' + headerrow;
webappurl=webappurl + '&startrow=' + datarow;
if(keepignore==true){
if(prefix=='' || separator==''){
webappurl=webappurl + '&prefix=' + 'false';
webappurl=webappurl + '&separator=' + 'false';
}
else{
webappurl=webappurl + '&prefix=' + prefix;
webappurl=webappurl + '&separator=' + separator;
}
}
else{
webappurl=webappurl + '&prefix=' + 'false';
webappurl=webappurl + '&separator=' + 'false';
}
if(emptycells==true)
webappurl=webappurl + '&emptycells=' + 'yes';
else
webappurl=webappurl + '&emptycells=' + 'no';
if(cellarrays==true){
webappurl=webappurl + '&cellarrays=' + 'yes';
webappurl=webappurl + '&separator2=' + separator2;
}
else{
webappurl=webappurl + '&cellarrays=' + 'no';
webappurl=webappurl + '&separator2=' + 'no';
}
if(columnignore==true){
webappurl=webappurl + '&columnignore=' + 'yes';
webappurl=webappurl + '&colprefix=' + colprefix;
}
else{
webappurl=webappurl + '&columnignore=' + 'no';
webappurl=webappurl + '&colprefix=' + 'no';
}
//Workflows.setCurrentMapSource("");
var kumuurl='Workflows.setCurrentMapSource("'+ webappurl +'")';
openUrl(webappurl,kumuurl);
}
//===================================================================================================================
function openUrl( url,kumuurl ){
var html = HtmlService.createHtmlOutput('<html>'
//+'<script>'
//+'window.close = function(){window.setTimeout(function(){google.script.host.close()},9)};'
//+'var a = document.createElement("a"); a.href="'+url+'"; a.target="_blank";'
//+'if(document.createEvent){'
//+' var event=document.createEvent("MouseEvents");'
//+' if(navigator.userAgent.toLowerCase().indexOf("firefox")>-1){window.document.body.append(a)}'
//+' event.initEvent("click",true,true); a.dispatchEvent(event);'
//+'}else{ a.click() }'
//+'close();'
//+'</script>'
// Offer URL as clickable link in case above code fails.
+'<body style="word-break:break-word;font-family:sans-serif;">' + kumuurl + '</body>'
+'<script>google.script.host.setHeight(150);google.script.host.setWidth(600)</script>'
+'</html>')
.setWidth(600).setHeight(1);
SpreadsheetApp.getUi().showModalDialog( html, "Click the Link below to get the LIVE Link" );
}
//===================================================================================================================
function setExportProperties(newProperties){
var properties = PropertiesService.getDocumentProperties();
var prop = properties.getProperty("settings");
properties.setProperty("settings", newProperties);
}
//===================================================================================================================
function getExportProperties(){
var props = PropertiesService.getDocumentProperties();
var prop = props.getProperty("settings");
//Logger.log(prop);
return prop;
}
//===================================================================================================================
function getSheetList(){
var ss=SpreadsheetApp.getActiveSpreadsheet();
var sheets=ss.getSheets();
var sheetnames=[];
sheetnames[0]="|"
for(var i=0;i<sheets.length;i++){
var sh=sheets[i];
sheetnames[i+1]=sh.getName()+"|"+sh.getName();
}
return sheetnames;
}
//===================================================================================================================
//LiveJson Code
//===================================================================================================================
function doGet(request) {
// Get request params.
var sheetKey = request.parameters.id;
var sheetName1 = request.parameters.sheet1;
var sheetName2 = request.parameters.sheet2;
var callback = request.parameters.callback;
var headerRow = request.parameters.header;
var startRow = request.parameters.startrow;
var prefix = request.parameters.prefix;
var separator = request.parameters.separator;
var emptycells = request.parameters.emptycells;
var cellarrays = request.parameters.cellarrays;
var separator2 = request.parameters.separator2;
var columnignore = request.parameters.columnignore;
var colprefix = request.parameters.colprefix;
// Parse the spreadsheet.
var spreadsheet = SpreadsheetApp.openById(sheetKey); //.getActiveSpreadsheet();
if(sheetName1!=''){
var keys = getHeaderRowKeys_(spreadsheet, sheetName1, headerRow, columnignore, colprefix);
var data1 = readData_(spreadsheet, sheetName1, headerRow, keys, startRow,prefix,separator,emptycells,cellarrays,separator2,columnignore, colprefix);
}
if(sheetName2!=''){
var keys = getHeaderRowKeys_(spreadsheet, sheetName2, headerRow, columnignore, colprefix);
var data2 = readData_(spreadsheet, sheetName2,headerRow, keys, startRow,prefix,separator,emptycells,cellarrays,separator2,columnignore, colprefix);
}
// Write and return the response.
if(sheetName1!='' && sheetName2!=''){
var response = JSON.stringify({ elements: data1,connections: data2 },null,'\t');
}
else if(sheetName1!='' && sheetName2==''){
var response = JSON.stringify({ elements: data1 },null,'\t');
}
else if(sheetName1=='' && sheetName2!=''){
var response = JSON.stringify({ connections: data2 },null,'\t');
}
var output = ContentService.createTextOutput();
if(callback == undefined){
// Serve as JSON
output.setContent(response).setMimeType(ContentService.MimeType.JSON);
}
else{
// Serve as JSONP
output.setContent(callback + "(" + response + ")").setMimeType(ContentService.MimeType.JAVASCRIPT);
}
//output.setContent(callback + "(" + response + ")").setMimeType(ContentService.MimeType.JAVASCRIPT);
return output;
}
//===================================================================================================================
function readData_(spreadsheet, sheetName, headerRow, properties, startRowNum, prefix,separator,emptycells,cellarrays,separator2,columnignore, colprefix) {
if (typeof properties == "undefined") {
properties = getHeaderRowKeys_(spreadsheet, sheetName, headerRow, columnignore, colprefix);
}
var rows = getDataRows_(spreadsheet, sheetName,headerRow, startRowNum,columnignore, colprefix);
var data = [];
if(emptycells=='yes'){//Ignore Empty Cells
for (var i = 0; i<rows.length; i++) {
var row = rows[i];
var record = {};
for (var p in properties) {
if(row[p]!=''){
var keys=properties
record=updateRecord(prefix,keys,p,row,record,prefix,separator,cellarrays,separator2)
//properties[p]=properties[p].replace(prefix,"")
}
}
data.push(record);
}
}
else{//Inclue Empty Cells
for (var i = 0; i<rows.length; i++) {
var row = rows[i];
var record = {};
for (var p in properties) {
var keys=properties
record=updateRecord(prefix,keys,p,row,record,prefix,separator,cellarrays,separator2)
}
data.push(record);
}
}
return data;
}
//===================================================================================================================
function updateRecord(prefix,properties,p,row,record,prefix,separator,cellarrays,separator2){
if(prefix=='false'){
if(cellarrays=='yes'){//Split Cell Values as arrays if contains comma
if(row[p].toString().indexOf(separator2)>=0){//Convert Cell As Array Only If Contains Comma
record[properties[p]]=row[p].toString().split(separator2);
}
else{
record[properties[p]]=row[p];
}
}
else{
record[properties[p]]=row[p];
}
}
else{//Split Entire Column as array if start with a prefix
var key=properties[p];
if(key.indexOf(prefix)==0){
key=key.replace(prefix,"")
if(row[p].toString().indexOf(separator)>=0)
record[key]=row[p].toString().split(separator);
else if(row[p].toString().indexOf(separator2)>=0)
if(cellarrays='yes')
record[key]=row[p].toString().split(separator2);
else
record[key]=row[p];
else
record[key]=row[p];
}
else{
if(cellarrays=='yes'){//Split Cell Values as arrays if contains separator2
if(row[p].toString().indexOf(separator2)>=0){//Convert Cell As Array Only If Contains separator2
record[key]=row[p].toString().split(separator2);
}
else{
record[key]=row[p];
}
}
else{
record[key]=row[p];
}
}
}
return record;
}
//===================================================================================================================
function getDataRows_(spreadsheet, sheetName, headerRow, startRowNum, columnignore, colprefix) {
var properties = getHeaderRow_2(spreadsheet, sheetName, headerRow, columnignore, colprefix);
if (typeof startRowNum == "undefined") startRowNum = 2;
var sheet = spreadsheet.getSheetByName(sheetName);
var values=sheet.getRange(startRowNum, 1, sheet.getLastRow()-1, sheet.getLastColumn()).getValues();
if(columnignore=='yes'){
var data=[];
for(var i=0;i<values.length;i++){
data[i]=[];
var k=0;
for(var j=0;j<properties.length;j++){
if(properties[j].toString().indexOf(colprefix)!=0){
data[i][k]=values[i][j];
k++;
}
}
}
return data;
}
else
return values;
}
//======================================================================================================================================================================================
function getHeaderRowKeys_(spreadsheet, sheetName, rowNum, columnignore, colprefix) {
if (typeof rowNum == "undefined") rowNum = 1;
var header=getHeaderRow_(spreadsheet, sheetName, rowNum, columnignore, colprefix);
return header;
}
//===================================================================================================================
function getHeaderRow_(spreadsheet, sheetName, rowNum, columnignore, colprefix) {
var sheet = spreadsheet.getSheetByName(sheetName);
var values=sheet.getRange(rowNum, 1, 1, sheet.getLastColumn()).getValues();
if(columnignore=='yes'){
var data=[];
for(var i=0;i<values.length;i++){
data[i]=[];
var k=0;
for(var j=0;j<values[0].length;j++){
if(values[i][j].toString().indexOf(colprefix)!=0){
data[i][k]=values[i][j];
k++;
}
}
}
return data[0];
}
else
return values[0];
}
//===================================================================================================================
function getHeaderRow_2(spreadsheet, sheetName, rowNum, columnignore, colprefix) {
var sheet = spreadsheet.getSheetByName(sheetName);
var values=sheet.getRange(rowNum, 1, 1, sheet.getLastColumn()).getValues();
return values[0];
}
HTML code (some CSS remove so as not to exceed char limit)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<base target="_top">
</head>
<body>
<body onload="populate()"></body>
<div class="main">
<h2 align="center" style="font-family:Open+Sans;"> Select Sheets</h2>
<div class="section">
<div class="block form-group">
<br>
<center> <label for="elmn">Select Elements Sheet</label>
<select id="elmn" name="elmn" style="width: 180px;" ></select>
<br>
<label for="conn">Select Connections Sheet</label>
<select id="conn" name="conn" style="width: 180px;" ></select></center>
</div>
</div>
<h2 align="center" style="font-family:Open+Sans;">General Data</h2>
<div class="section">
<div id="new-div">
<center>Header Row:<br>
<input type="text" name="Header Row" value="1" id="headerrow">
<br><br>
Start Data Row:<br>
<input type="text" name="Data Row" value="2" id="datarow"> </center>
</div>
</div>
<h2 align="center" style="font-family:Open+Sans;">JSON Settings</h2>
<div class="buttonDiv" >
<!--<div class="newButtonDiv"></div>-->
<button class="action" value="Run" onclick="get_form_values()">View</button>
<input type="reset" value="Reset" onclick="enableTextBox()">
</div>
</div>
<script>
var elements = "";
var connections = "";
var emptycells = "";
var headerrow = "";
var datarow = "";
var prefix = "";
var separator = "";
var keepignore = "";
var cellarrays = "";
var separator2 = "";
var columnignore="";
var colprefix="";
var elementsIndex = "";
var elementsValue = "";
var connectionsIndex = "";
var connectionsValue = "";
function populate(){
var elementlist=document.getElementById('elmn');
var connectlist=document.getElementById('conn');
//document.getElementById("elmn").innerHTML = "";
//document.getElementById("conn").innerHTML = "";
function onSuccess(optionarray) {
for(var option in optionarray){
var pair=optionarray[option].split("|")
var newoption=document.createElement("Option");
newoption.value=pair[0];
newoption.innerHTML=pair[1];
elementlist.options.add(newoption);
var newoption=document.createElement("Option");
newoption.value=pair[0];
newoption.innerHTML=pair[1];
connectlist.options.add(newoption);
}
elementlist.selectedIndex=elementsIndex;
connectlist.selectedIndex=connectionsIndex;
}
//console.log(document.getElementById('elmn').options);
google.script.run.withSuccessHandler(onSuccess).getSheetList();
enableTextBox();
}
function get_form_values(){
//...
var e = document.getElementById('elmn');
elementsValue = e.options[e.selectedIndex].value;
elements = e.options[e.selectedIndex].text;
elementsIndex = e.options[e.selectedIndex].index;
//...
//...
var c = document.getElementById('conn');
connectionsValue = c.options[c.selectedIndex].value;
connections = c.options[c.selectedIndex].text;
connectionsIndex = c.options[c.selectedIndex].index;
//...
emptycells=document.getElementById('emptycells').checked;
headerrow=document.getElementById('headerrow').value;
datarow=document.getElementById('datarow').value;
prefix=document.getElementById('prefix').value;
separator=document.getElementById('separator').value;
keepignore=document.getElementById('keepignore').checked;
cellarrays=document.getElementById('cellarrays').checked;
separator2=document.getElementById('separator2').value;
columnignore=document.getElementById('columnignore').checked;
colprefix=document.getElementById('colprefix').value;
var sheets=[];
sheets[0]=elements;
sheets[1]=connections;
var settings=[];
settings[0]=emptycells;
settings[1]=headerrow;
settings[2]=datarow;
settings[3]=prefix;
settings[4]=separator;
settings[5]=keepignore;
settings[6]=cellarrays;
settings[7]=separator2;
settings[8]=columnignore;
settings[9]=colprefix;
setProperties();
google.script.run.showData(sheets,settings);
}
function setProperties(){
return google.script.run.setExportProperties(generateProperties());
}
function generateProperties(){
var properties = {
//General settings
"emptycells" : emptycells,
"headerrow" : headerrow,
"datarow" : datarow,
"prefix" : prefix,
"separator" : separator,
"keepignore" : keepignore,
"cellarrays" : cellarrays,
"columnignore" : columnignore,
"colprefix" : colprefix,
"separator2" : separator2,
"elements" : elements,
"connections" : connections,
"elementsIndex" : elementsIndex,
"elementsValue": elementsValue,
"connectionsIndex" : connectionsIndex,
"connectionsValue": connectionsValue,
};
return JSON.stringify(properties);
}
//Actually sets the local properties based on stored settings.
function updateProperties(properties){
var settings;
if(properties == null || properties === ""){
settings = {};
}
else{
settings = JSON.parse(properties);
}
//General
//connections = settings["connections"] != null ? settings["connections"] : connections;
elements = settings["elements"] != null ? (settings["elements"] === "" ? elements : settings["elements"]) : elements
elementsIndex = settings["elementsIndex"] != null ? settings["elementsIndex"] : elementsIndex;
elementsValue = settings["elementsValue"] != null ? settings["elementsValue"] : elementsValue;
connections = settings["connections"] != null ? (settings["connections"] === "" ? connections : settings["connections"]) : connections
connectionsIndex = settings["connectionsIndex"] != null ? settings["connectionsIndex"] : connectionsIndex;
connectionsValue = settings["connectionsValue"] != null ? settings["connectionsValue"] : connectionsValue;
emptycells = settings["emptycells"] != null ? settings["emptycells"] : emptycells;
headerrow = settings["headerrow"] != null ? settings["headerrow"] : headerrow;
datarow = settings["datarow"] != null ? settings["datarow"] : datarow;
prefix = settings["prefix"] != null ? settings["prefix"] : prefix;
separator = settings["separator"] != null ? settings["separator"] : separator;
keepignore = settings["keepignore"] != null ? settings["keepignore"] : keepignore;
cellarrays = settings["cellarrays"] != null ? settings["cellarrays"] : cellarrays;
separator2 = settings["separator2"] != null ? settings["separator2"] : separator2;
columnignore = settings["columnignore"] != null ? settings["columnignore"] : columnignore;
colprefix = settings["colprefix"] != null ? settings["colprefix"] : colprefix;
refreshSideBar();
//populate(elementsValue, connectionsValue);
}
//Function to rebuild the sidebar after loading export parameters
function refreshSideBar(){
document.getElementById('emptycells').checked=emptycells;
if(headerrow=="")
document.getElementById('headerrow').value="1";
else
document.getElementById('headerrow').value=headerrow;
if(datarow=="")
document.getElementById('datarow').value="2";
else
document.getElementById('datarow').value=datarow;
if(prefix=="")
document.getElementById('prefix').value="ja_";
else
document.getElementById('prefix').value=prefix;
if(separator=="")
document.getElementById('separator').value="|";
else
document.getElementById('separator').value=separator;
document.getElementById('keepignore').checked=keepignore;
document.getElementById('cellarrays').checked=cellarrays;
document.getElementById('columnignore').checked=columnignore;
if(colprefix=="")
document.getElementById('colprefix').value="ig_";
else
document.getElementById('colprefix').value=colprefix;
if(separator2=="")
document.getElementById('separator2').value="|";
else
document.getElementById('separator2').value=separator2;
EnableTextbox1('keepignore', 'prefix' ,'separator')
EnableTextbox('columnignore', 'colprefix')
EnableTextbox('cellarrays', 'separator2')
}
function getProperties(onSuccess){
return google.script.run.withSuccessHandler(onSuccess).getExportProperties();
}
//enable disable
function EnableTextbox(CheckboxId,TextboxId1){
if(document.getElementById(CheckboxId).checked){
document.getElementById(TextboxId1).style.backgroundColor = "#fff"
document.getElementById(TextboxId1).disabled=false;
}
else{
document.getElementById(TextboxId1).style.backgroundColor = "#5bb800"
document.getElementById(TextboxId1).disabled=true;
}
}
function EnableTextbox1(CheckboxId,TextboxId1, TextboxId2){
if(document.getElementById(CheckboxId).checked){
document.getElementById(TextboxId1).style.backgroundColor = "#fff";
document.getElementById(TextboxId2).style.backgroundColor = "#fff";
document.getElementById(TextboxId1).disabled=false;
document.getElementById(TextboxId2).disabled=false;
}
else{
document.getElementById(TextboxId1).style.backgroundColor = "#5bb800";
document.getElementById(TextboxId2).style.backgroundColor = "#5bb800";
document.getElementById(TextboxId1).disabled=true;
document.getElementById(TextboxId2).disabled=true;
}
}
function enableTextBox(){
document.getElementById("elmn").selectedIndex = 0;
document.getElementById("conn").selectedIndex = 0;
document.getElementById("headerrow").value = "1";
document.getElementById("datarow").value = "2";
document.getElementById("emptycells").checked = false;
//========================================================
document.getElementById("keepignore").checked = false;
document.getElementById("prefix").value = "ja_";
document.getElementById("separator").value = "|";
document.getElementById("columnignore").checked = false;
document.getElementById("colprefix").value = "ig_";
document.getElementById("cellarrays").checked = false;
document.getElementById("separator2").value = "|";
document.getElementById("prefix").style.backgroundColor = "#5bb800";
document.getElementById("separator").style.backgroundColor = "#5bb800";
document.getElementById("colprefix").style.backgroundColor = "#5bb800";
document.getElementById("separator2").style.backgroundColor = "#5bb800";
document.getElementById("prefix").disabled=true;
document.getElementById("separator").disabled=true;
document.getElementById("colprefix").disabled=true;
document.getElementById("separator2").disabled=true;
}
//end
getProperties(updateProperties);
</script>
</body>
</html>

I believe your goal is as follows.
You want to remove the following error. (The following image is from your question.)
When I saw your script and your sample Spreadsheet, I noticed that your sheet of "Connections" has only the header row. In this case, an error occurs at var values=sheet.getRange(startRowNum, 1, sheet.getLastRow()-1, sheet.getLastColumn()).getValues(); in your script. Because sheet.getLastRow()-1 is 0. So, in your situation, how about the following modification?
From:
var values=sheet.getRange(startRowNum, 1, sheet.getLastRow()-1, sheet.getLastColumn()).getValues();
To:
var rows = sheet.getLastRow() - 1;
var values = rows > 0 ? sheet.getRange(startRowNum, 1, rows, sheet.getLastColumn()).getValues() : [];
By this modification, when "Connections" sheet has only the header, [] is used as values.

How can I parse html table inside a script respecting merged cells

This header is contained in a js file https://www.portaldefinancas.com/js-tx-ctb/th-cdib.js
document.write(""),document.write('</p></caption><thead><tr><th rowspan="4">Mês de<br>Referência</th><th colspan="7">Taxas - %</th></tr><tr> <th rowspan="3">Mensal</th><th colspan="4">Anualizada</th><th colspan="2">Acumulada</th></tr><tr> <th colspan="2">Ano de<br>252 dias<br> úteis</th><th colspan="2">Ano de<br>365/366 dias<br>corridos</th><th rowspan="2">No ano</th><th rowspan="2">Em <br>12 meses</th></tr><tr><th>Dias</th><th> Taxa</th><th>Dias</th><th> Taxa</th></tr></thead><tbody>');
How can I parse the headers respecting the merged rows and merged columns. The script I use today is
function getHeaders(url) {
var source = UrlFetchApp.fetch(url).getContentText()
source = source.split('document')[2]
var table = '<table><tr><th ' + source.match(/(?<=<th ).*(?=th>)/g) + 'th></tr></table>'
table=table.replace(/ê/g,'ê').replace(/ú/g,'ú').replace(/<br>/g,'\n')
var doc = XmlService.parse(table);
var rows = doc.getDescendants().filter(function(c) {
var element = c.asElement();
return element && element.getName() == "tr";
});
var data = rows.slice(0).map(function(row) {
return row.getChildren("th").map(function(cell) {
return cell.getValue();
});
});
return data;
}
but it doesn't respect merged areas. Thanks for any help !

Since intellectual exercises is my my drug of choice... I can't help it. Here is the possible solution. It works to a degree but it shows little the traits of lofty style of coding:
function main() {
var sheet = SpreadsheetApp.getActiveSheet();
var data = getHeaders();
data = handle_rowspans(data);
sheet.getRange(1, 1, data.length, data[0].length).setValues(data);
}
function getHeaders(url) {
// var source = UrlFetchApp.fetch(url).getContentText()
// source = source.split('document')[2]
var source = `<thead><tr><th rowspan="4">Mês de<br>Referência</th><th colspan="7">Taxas - %</th></tr><tr> <th rowspan="3">Mensal</th><th colspan="4">Anualizada</th><th colspan="2">Acumulada</th></tr><tr> <th colspan="2">Ano de<br>252 dias<br> úteis</th><th colspan="2">Ano de<br>365/366 dias<br>corridos</th><th rowspan="2">No ano</th><th rowspan="2">Em <br>12 meses</th></tr><tr><th>Dias</th><th> Taxa</th><th>Dias</th><th> Taxa</th></tr></thead><tbody>`;
source = handle_colspans(source);
table = '<table><tr><th ' + source.match(/(?<=<th ).*(?=th>)/g) + 'th></tr></table>';
table = table.replace(/ê/g, 'ê').replace(/ú/g, 'ú').replace(/<br>/g, '\n');
var doc = XmlService.parse(table);
var rows = doc.getDescendants().filter(function (c) {
var element = c.asElement();
return element && element.getName() == "tr";
});
var data = rows.slice(0).map(function (row) {
return row.getChildren("th").map(function (cell) {
return cell.getValue();
});
});
return data;
}
function handle_colspans(table) {
return table.split('</tr>').map(r => add_cells_in_row(r)).join('</tr>');
function add_cells_in_row(row) {
var cells = row.split('</th>');
for (var i in cells) {
if (/colspan/.test(cells[i])) {
var colspan = cells[i].replace(/.*colspan="(\d+).*/, '$1');
cells[i] += '{col' + colspan + '}';
cells[i] = [cells[i], ...(new Array(+colspan - 1).fill('<th>'))];
}
if (/rowspan/.test(cells[i])) {
var rowspan = cells[i].replace(/.*rowspan="(\d+).*/, '$1');
cells[i] += '{row' + rowspan + '}';
}
}
return cells.flat().join('</th>')
}
}
function handle_rowspans(array) {
for (var row in array) {
for (var col in array[row]) {
if (/\{row/.test(array[row][col])) {
var rowspan = array[row][col].replace(/.*\{row(\d+).*/s, '$1');
for (var r = 1; r < rowspan; r++) array[+row + r].splice(col, 0, '')
}
}
}
return array;
}
It will get you the table like this:
Whrere {row#} and {col#} means how many cells or rows to the left or to the bottom you need to join to the current cell to recreate the original design. It could be the next dose of the intellectual exercises. :)

A solution, example with url = https://www.portaldefinancas.com/js-tx-ctb/th-cdib.js
function getHeaders(url) {
var source = UrlFetchApp.fetch(url).getContentText()
source = source.split('document')[2]
var table = '<table><tr><th ' + source.match(/(?<=<th ).*(?=th>)/g) + 'th></tr></table>'
table=table.replace(/ê/g,'ê').replace(/ú/g,'ú').replace(/<br>/g,'\n')
var doc = XmlService.parse(table);
var rows = doc.getDescendants().filter(function(c) {
var element = c.asElement();
return element && element.getName() == "tr";
});
var n=0
var data=[]
rows.slice(0).map(function(row) {data[n++]=[]})
n=0
rows.slice(0).map(function(row) {
row.getChildren("th").map(function(cell) {
try{nbcols = cell.getAttribute('colspan').getValue()}catch(e){nbcols = 1}
try{nbrows = cell.getAttribute('rowspan').getValue()}catch(e){nbrows = 1}
var value = cell.getValue()
r=0
var free=0
while(r<nbrows*1){
c=0
while(c<nbcols*1){
while(data[n+r][free]!=null){free++}
data[n+r][free]=(value)
value=''
c++
}
r++
}
});
n++
});
return (data);
}

What could be causing session loss on dialog popup chrome?

I am working on an application that initiates a popup dialog, this dialog requires a session however it is getting lost. This is happening on Chrome only so far. I've test in Opera and Edge, both are working. I am only losing the session in Chrome. I submitted this question in SuperUsers site as well. Apologies for the additional code, it's probably not necessary.
Below is a jsfiddle that produces a dialog.
https://jsfiddle.net/0kv4bqjy/2/
Html
<div id="apollo-actions-wrapper" data-uri="www.sap.com">
<div id="apollo-inner-wrapper">
<img src="https://www.apolloproject.xyz/a/images/apollo-launcher.png"/>
<span id="apollo-likes"><span id="likes-span"></span> likes</span>
<span id="apollo-shares"><span id="shares-span"></span> shares</span>
<span id="apollo">Apollo</span>
</div>
</div>
Javascript
var ResourceRequest = function(){
var http = function(uri, method){
var request = new XMLHttpRequest();
request.onprogress = updateRequestProgress;
return new Promise(function(resolve, reject){
request.onreadystatechange = function () {
if (request.readyState !== 4) return;
if (request.status >= 200 && request.status < 300) {
resolve(request);
} else {
reject({
status: request.status,
statusText: request.statusText
});
}
};
request.open(method ? method : 'get', uri, true);
request.send();
});
}
var updateRequestProgress = function(arg){
}
return {
http: http
}
}
var popup = {}
var actionsWrapper = document.getElementById("apollo-actions-wrapper")
var innerActionsWrapper = document.getElementById("apollo-inner-wrapper");
var launchApollo = document.getElementById("launch-apollo")
var likesWrapper = document.getElementById("apollo-likes")
var sharesWrapper = document.getElementById("apollo-shares")
var likesSpan = document.getElementById("likes-span")
var sharesSpan = document.getElementById("shares-span")
var apolloSpan = document.getElementById("apollo")
addActionStyles()
var req = new ResourceRequest()
var uri = actionsWrapper.getAttribute("data-uri")
var likesUri = "https://www.apolloproject.xyz/a/resource/likes?uri=" + encodeURIComponent(uri);
var sharesUri = "https://www.apolloproject.xyz/a/resource/shares?uri=" + encodeURIComponent(uri);
var likesUriDev = "/a/resource/likes?uri=" + encodeURIComponent(uri);
var sharesUriDev = "/a/resource/shares?uri=" + encodeURIComponent(uri);
req.http(likesUri).then(updateLikes).catch(error)
req.http(sharesUri).then(updateShares).catch(error)
var launcher = document.getElementById("launch-apollo")
launcher.addEventListener("click", function(){
var uri = actionsWrapper.getAttribute("data-uri")
var src = "https://www.apolloproject.xyz/a/resource?uri=" + encodeURIComponent(uri)
var srcDev = "http://localhost:8080/a/resource?uri=" + encodeURIComponent(uri)
var height = 575;
var width = 437
var top = (screen.height - height) / 4;
var left = (screen.width - width) / 2;
popup = window.open("", "ApolloResourceAction", 'top=100 left=' + left + ' width=437 height=575')
popup.document.write('<iframe width="' + width + '" height="' + height + '" allowTransparency="true" frameborder="0" scrolling="yes" style="width:100%;" src="'+ src +'" type="text/javascript"></iframe>');
})
function updateLikes(request){
var data = JSON.parse(request.responseText)
console.log(data)
likesSpan.innerHTML = data.likes
}
function updateShares(request){
var data = JSON.parse(request.responseText)
sharesSpan.innerHTML = data.shares
}
function addActionStyles(){
innerActionsWrapper.style.cssText = "position:relative;width:140px; height:57px;"
launchApollo.style.cssText = "color:#2cafed;font-size:39px;font-weight:bold;text-decoration:none;"
likesWrapper.style.cssText = "position:absolute; left:49px; top:0px; font-size:12px;"
sharesWrapper.style.cssText = "position:absolute; left:49px; bottom:27px; font-size:12px;"
likesSpan.style.cssText = "font-size:12px;"
sharesSpan.style.cssText = "font-size:12px;"
apolloSpan.style.cssText = "font-size:11px;display:block;clear:both;"
var css = '#launch-apollo:hover{ color: #617078 !important }' +
'#apollo-actions-wrapper{ text-align:left; display:inline-block; width:140px; height:57px; }';
var style = document.createElement('style');
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.getElementsByTagName('head')[0].appendChild(style);
}
var timer = setInterval(function () {
if (popup.closed) {
clearInterval(timer);
window.location.reload(); // Refresh the parent page
}
}, 1000);
function error(){
console.log(error)
}
Thank you.

It turned out Chrome had updated it's cookie requirements a while back for popups within external sites. In my case I had to set SameSite to None and Secure to true.

Cannot append option for select form

I want to load option data from a Sheet and append to the select element, but I cannot set the global variable
var select_values = [];
google.script.run.withSuccessHandler(loadOpt).loadData("Test");
function loadOpt(data_arrar) {
const arrayColumn = (arr, n) => arr.map(x => x[n]);
select_values = arrayColumn(data_arrar, 1);
}
var opt = document.getElementById("select_opts");
for (i = 0; i < select_values.length; i++) {
let option = document.createElement("option");
option.value = i;
option.text = select_values[i];
opt.appendChild(option);
}
The result is nothing appended to [select_opts].
I'm update the code.gs.
var TestSheets = SpreadsheetApp.openById("XXX");
function doGet(e) {
if (!e.parameter.page) {
// When no specific page requested, return "home page"
return HtmlService.createTemplateFromFile('Home').evaluate();
}
// else, use page parameter to pick an html file from the script
return HtmlService.createTemplateFromFile(e.parameter['page']).evaluate();
}
function loadData(Sheetname) {
var sheet = TestSheets.getSheetByName(Sheetname);
var rows = sheet.getRange("A1").getValue();
var Columns = sheet.getRange("B1").getValue();
var data_return = [];
for (var i = 0; i <= rows; i++) {
data_return[i] = [];
for (var j = 0; j <= Columns - 1; j++) {
data_return[i][j] = sheet.getRange(i + 2, j + 1).getValue();
}
}
return data_return;
}
Note that function loadData works well & has been tested.

The problem is that Javascript code outside of functions will be called on loading of the HTML document
It will not be reevaluated after running code in functions
If you want your loop to run after function loadData(Sheetname) - you need to put the loop into another function that is called after the execution of function loadData(Sheetname)
Sample:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script>
var select_values = [];
google.script.run.withSuccessHandler(loadOpt).loadData("Test");
function loadOpt(data_arrar) {
const arrayColumn = (arr, n) => arr.map(x => x[n]);
select_values = arrayColumn(data_arrar, 1);
console.log(" select_values: " + select_values);
callLater();
}
console.log(" select_values in call outside: " + select_values);
function callLater(){
console.log(" select_values in callLater: " + select_values);
var opt = document.getElementById("select_opts");
for (i = 0; i < select_values.length; i++) {
let option = document.createElement("option");
option.value = i;
option.text = select_values[i];
opt.appendChild(option);
}
}
</script>
</body>
</html>

Saving data from a Chrome extension

I am trying to create a Chrome extension that looks like the image below.
I want to save the Name and Id when clicking "+" button and I want to load all saved data int the onLoad event as seen in the upper section of image. I would also like to delete a particular row of data when clicking corresponding delete button.
Saved data should persist when closing Chrome.
document.body.onload = function() {
chrome.storage.sync.get(["id","name"], function(items) {
if (!chrome.runtime.error) {
console.log(items);
document.getElementById("lsid").innerText = items.id;
document.getElementById("lsname").innerText = items.name;
}
});
}
document.getElementById("set").onclick = function() {
var d = document.getElementById("name").value;
var x = document.getElementById("id").value;
d=String(d);
chrome.storage.sync.set({"name":d,"id" : x}, function() {
if (chrome.runtime.error) {
console.log("Runtime error.");
}
});
window.close();
}

document.body.onload = function Load() {
for(var i=0;i<localStorage.length;i++){
var row = document.createElement("TR");
var col1 = document.createElement("TD");
var col2 = document.createElement("TD");
var col3 = document.createElement("TD");
var del = document.createElement("BUTTON");
var id=localStorage.key(i);
col1.innerHTML=localStorage.getItem(id);
col2.innerHTML=id;
del.innerHTML="delete";
del.id=id;
del.className ="delete";
col3.appendChild(del);
row.appendChild(col1);
row.appendChild(col2);
document.getElementById("list_table").appendChild(row);
}
}
document.form_save.onsubmit = function() {
var newName = document.form_save.name.value;
var newId = document.form_save.id.value;
window.localStorage.setItem(newId, newName);
location.reload();
}
document.getElementById("list_table").onclick=function(e){
if(e.target.className=="delete"){
var result = confirm("Want to delete?");
if (result) {
window.localStorage.removeItem(e.target.id);
location.reload();
}
}
}