将数据推送到不同的元素，具体取决于使用GAS的Google电子表格中的列？

Question

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

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

这是我的数据：

这就是HTML中的样子：

这就是我想要的：

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

下面是我在开头描述的代码：

Code.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;
}

stuff.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>

有什么建议吗？

修改

Code2.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问题。