javascript - 将数据推送到不同的元素，具体取决于带有 GAS 的 google 电子表格中的列？

Question

我在使用 GAS 的 Google 电子表格中工作，我正在尝试将一些数据从电子表格推送到 HTML 页面，现在它正在运行。但我设法做的是获取所有值，每次它遇到新行时，它都会获取该行中的所有值，将它们插入新创建的 <div> 中。 .但我想做的是也有一些列功能，以便将不同的列推送到不同的元素，如 <input>。或 <select>元素。

我尝试了一些方法，我为所需的列声明了一些变量，并尝试将它们一个一个地推送到 HTML，但没有成功。

这是我的数据:

这是它在 HTML 中的样子:

这就是我想要的:

将其发布到表格中会更好吗？因为我只是想用类创建div并设置它们的宽度和换行符？

下面是我一开始描述的代码:

代码.gs

var ss   = SpreadsheetApp.openById("1c7IwmyBrbNq5xwzo-7EyFewCx31WpfP4EzLpkHawffI");

function doGet(request) {
return HtmlService.createTemplateFromFile('stuff')
  .evaluate()
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function include(filename) {
 return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function getStitchOrders(){
var ordersName = [];
var sheet = ss.getSheetByName("Cat1");
var subRange = sheet.getRange(2, 1, sheet.getLastRow(), sheet.getLastColumn());
var orders = subRange.getValues(); 

for (var i = 0; i < orders.length; i++) {

ordersName.push( orders[i] )
}
return ordersName;
}

东西.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="orders">
//Data is listed here.
</div>

<script>
$(function() {
google.script.run.withSuccessHandler(buildOrderList).getStitchOrders();
});

function buildOrderList(ordersName) {
var rows = $('#orders');
for (var i = 0; i < ordersName.length; i++) {
rows.append('<div name="' + ordersName[i] + '">' + ordersName[i] + '</div>');
}
}
</script>

有什么建议吗？

编辑

代码2.gs

 var ss   = SpreadsheetApp.openById("1c7IwmyBrbNq5xwzo-7EyFewCx31WpfP4EzLpkHawffI");

function doGet(request) {
 return HtmlService.createTemplateFromFile('stuff2')
  .evaluate()
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function getStitchOrders(){
var ordersName = [];
var sheet = ss.getSheetByName("Sheet");
var subRange = sheet.getRange(2, 1, sheet.getLastRow(), sheet.getLastColumn());
var orders = subRange.getValues(); 

for (var i = 0; i < orders.length; i++) {
ordersName.push( { 
name: orders[i][0], 
status: orders[i][1],
comment: orders[i][2]
} );
}
return JSON.stringify(ordersName);
}

stuff2.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="orders">
</div>

<script>

$(function() {
google.script.run.withSuccessHandler(buildOrderList).getStitchOrders();
});

function buildOrderList(ordersName) {
var arr = JSON.Parse(ordersName);
var rows = $('#orders');
for (var i = 0; i < arr.length; i++) {
rows.append('<div name="' + arr[i].name + '">' +  arr[i].name  + '</div>');
}
}

</script>

Answer 1

考虑返回具有这种模式的数据:

for (var i = 0; i < orders.length; i++) {
  ordersName.push( { 
    name: orders[i][0], 
    status: orders[i][1],
    comment: orders[i][2]
  } );
}
return JSON.stringify(ordersName);

然后回到客户端JS我们可以把它变回一个数组来循环:

function buildOrderList(ordersName) {
  var arr = JSON.parse(ordersName);
  var rows = $('#orders');
  for (var i = 0; i < arr.length; i++) {
    // values can now be referenced via...
    // arr[i].name
    // arr[i].status;
    // arr[i].comment;
    rows.append(...);
  }
}

然后如何设计 div 和其中的元素以像表格一样对齐更像是一个 CSS 问题。