Unable to load Array data to Html

Question

I am trying to populate the array data into html using google apps script.

I have given a lot of time to troubleshoot the problem but could not find whats missing:-

HTML Tags :-

   <table class="highlight">
        <thead>
          <tr>
              <th>Delta</th>
              <th>Assigned</th>
              <th>Reviewed</th>
              <th>Pending</th>
                        
          </tr>
        </thead>

        <tbody id="perf">

        </tbody>
      </table>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <?!= include('table1-js'); ?>

Javascript:-

<script>

var data = [

[1,2,3,4]
[5,6,7,8]
[9,10,11,12]
[9,10,11,12]

];
document.addEventListener('DOMContentLoaded', function(){

getTable1Data(data);
});

function getTable1Data(dataArray){


var tbody = document.getElementById('perf');

dataArray.forEach(function(r){

var row = document.createElement("tr");
var col1 = document.createElement("td");
col1.textContent = r[0];
var col2 = document.createElement("td");
col2.textContent = r[1];
var col3 = document.createElement("td");
col3.textContent = r[2];
var col4 = document.createElement("td");
col4.textContent = r[3];

row.appendChild(col1);
row.appendChild(col2);
row.appendChild(col3);
row.appendChild(col4);

tbody.appendChild(row);

});

}

</script>

Currently the result is only the Heading displayed in HTML and there is no data that is being appended into the table.

qelli · Accepted Answer · 2019-09-03 16:21:01Z

3

You got a syntax error in your data array. Separate with comma every element:

var data = [
  [1, 2, 3, 4], // Element separation comma
  [5, 6, 7, 8],
  [9, 10, 11, 12],
  [9, 10, 11, 12]
];

Also, if that is the structure of the data you are handling, you can simplify your code a lot by doing two inherit forEach's:

const data = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9, 10, 11, 12],
  [9, 10, 11, 12]
];
document.addEventListener('DOMContentLoaded', function() {
  getTable1Data(data);
});

function getTable1Data(dataArray) {
  let tbody = document.getElementById('perf');
  dataArray.forEach(function(r) {
    let row = document.createElement("tr")
    r.forEach(function(c) {
      let col = document.createElement("td")
      col.innerText = c
      row.appendChild(col)
    })
    tbody.appendChild(row);
  });

}

<table class="highlight">
  <thead>
    <tr>
      <th>Delta</th>
      <th>Assigned</th>
      <th>Reviewed</th>
      <th>Pending</th>
    </tr>
  </thead>
  <tbody id="perf"></tbody>
</table>

answered Sep 3, 2019 at 16:21

qelli

2,0872 gold badges14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mask Over a year ago

Wow that does it Thank you very much @k3llydev.

qelli Over a year ago

Always glad to help, happy coding @Mask!

Cooper · Accepted Answer · 2019-09-03 16:46:00Z

1

In Google App Script(as requested):

function arrayToHmtl(arr) {
  var arr=arr || [[1,2,3,4],[5,6,7,8],[9,10,11,12],[9,10,11,12]];
  var ss=SpreadsheetApp.getActive();
  var html='<style>th,td{border:1px solid black;}</style><table>';
  for(var i=0;i<arr.length;i++) {
    html+='<tr>';
    for(var j=0;j<arr[i].length;j++) {
      html+='<td>' + arr[i][j] + '</td>';
    }
    html+='</tr>';
  }
  html+='</table><br /><input type="button" value="Exit" onClick="google.script.host.close();" />';
  var userInterface=HtmlService.createHtmlOutput(html).setWidth(800);
  SpreadsheetApp.getUi().showModelessDialog(userInterface, "Table Data");
}

Just copy, paste and run. It will create a modeless dialog.

edited Sep 3, 2019 at 16:46

answered Sep 3, 2019 at 16:40

Cooper

64.2k7 gold badges29 silver badges65 bronze badges

Collectives™ on Stack Overflow

Unable to load Array data to Html

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related