Push data to different elements, depending on column in google spreadsheet with GAS?

Question

I am working in Google Spreadsheet with GAS, and I am trying to push some data from a spreadsheet to an HTML page, and right now that is working. But I am managing to do is grabbing all the values, and each time it hits a new row, it grabs all the values in that row pushes them into a newly created <div> . But I would like to do is have some column functionality also so that the different columns gets pushed to a different element like an <input> or a <select> element.

I tried out some things where I declared some variables for the desired columns, and trying to pushing them to the HTML one by one, but it didn't work out.

Here is my data:

This is what it looks like in the HTML:

This is what I am going for:

Would it be better to publish this into tables? Because I simply thought of creating divs with classes and set their width and line breaks?

Below is the code I described in the beginning:

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">
</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>

Any suggestions?

Edit

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

consider returning the data with this type of pattern:

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);

then back in the client-side JS we can turn it back into an Array to loop through:

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(...);
  }
}

how to then style the divs and the elements inside them to align up like a table is more a CSS question.