Generate html table from getValues function in google web app

Question

Now I have work funktion that take Values from google spreadshet table, and return it in google web app. But it have non table view. How I can represented it as html table?

code.gs

//generate web-app
            function doGet() {
              return HtmlService.createHtmlOutputFromFile('index');
            }

            function returnCellValue(range1) {
              return SpreadsheetApp.openById('1d_qxlDQm3aAfN9zIszqmCmILCK9cVT7PpzchMHliSjM').getSheetByName('output').getRange(range1).getValues();
            }

            function test1() {
              var ss =  SpreadsheetApp.openById('1d_qxlDQm3aAfN9zIszqmCmILCK9cVT7PpzchMHliSjM').getSheetByName('output');
              returnCellValue('A2:E10');
            }

//get data from form
            function emailTech(form){
              var ss =  SpreadsheetApp.openById('1d_qxlDQm3aAfN9zIszqmCmILCK9cVT7PpzchMHliSjM').getSheetByName('output');
              var nameBox = form.techEmail;
              ss.getRange("A1").setValue(nameBox);
            }

index.html

<script type="text/javascript">
function onSuccess(B2Value) {
document.getElementById('output').innerHTML = B2Value;
}

google.script.run.withSuccessHandler(onSuccess).returnCellValue('A2:E10');

 function formSubmit() {
            google.script.run.emailTech(document.forms[0]);
        }
</script>

<div id="output">1</div> 
     <form>
       <input type="text" value=" " name="techEmail" />
       <input type="button" onClick="formSubmit(); google.script.run.test1(); google.script.run.withSuccessHandler(onSuccess).returnCellValue('A2:E10'); google.script.run.emailTech(document.forms[0])" value="Show" />
     </form>

It's all work fine, I publish it like web app and input in text box number from table on sheet 'data' (1024, 9710, 00/, etc.), then this number set in A1 on sheet 'output' and from this sheet i pull data to web app but it all look like simple text, not table. How to display it in table view?

link on web app https://script.google.com/macros/s/AKfycbwYkJfplYLVEaXy9FVV5b6BrXkZ6bPmF5ZHrlzrpuQ/dev

Answer 1

You didn't convert your data to an HTML table.

try converting B2Value to an html table before setting writing it to the output element.

Here's a primitive function:

function toHTMLTable(a) {
  var content = a.map(function(row, i) {
    var rowHTML = row.map(function (col) {
      return "<td>" + col + "</td>";
    }).join("");

    return "<tr>" + rowHTML + "</tr>";
  }).join("");
  return "<table>" + content + "</table>";
}