Mi objetivo es mostrar la tabla de datos de la hoja de Google en mi aplicación web en una tabla. El script solo muestra la última data column de dataArray . ¿Alguien podría ayudar, por qué este código solo puede agregar la última columna de datos y no todos?
Código.gs
function getTableDataTV(){ const ws = SpreadsheetApp.openById("").getSheetByName("Sheet2"); const data = ws.getRange (1,1,ws.getLastRow(), 9).getDisplayValues(); return dataHTML
<html> <head> <script> document.addEventListener("DOMContentLoaded",function(){ google.script.run.withSuccessHandler(generateTable).getTableDataTV(); }); function generateTable(dataArray){ var tabledb = document.getElementById("ptable"); console.log(dataArray); dataArray.forEach(function(item, index){ if(index == 0){ var theaddb = document.createElement("thead"); var rhead = document.createElement("tr"); var th = document.createElement("th"); console.log(dataArray[0].length); for(var i=0;i<(dataArray[0].length);i++){ th.textContent = item[i]; rhead.appendChild(th); } theaddb.appendChild(rhead); tabledb.appendChild(theaddb); } else if(index > 0) { var tbody = document.createElement("tbody"); var rbody = document.createElement("tr"); var td = document.createElement("td"); for(var i=0;i<(dataArray[0].length);i++){ td.textContent = item[i]; rbody.appendChild(td); } tbody.appendChild(rbody); tabledb.appendChild(tbody); } }); } </script> </head> <body> <div class="col s12"> <table id = "ptable"> </table> </div> </body> </html>consola.log(matriz de datos);
0: Array(9) [ "DATE", "TITLE 1", "TITLE 2", … ] 1: Array(9) [ "2021-11-01", "3094392", "6338933", … ] 2: Array(9) [ "2021-11-02", "3841183", "6731805", … ] 3: Array(9) [ "2021-11-03", "5267740", "7713644", … ] 4: Array(9) [ "2021-11-04", "3144660", "6177727", … ] 5: Array(9) [ "2021-11-05", "3677444", "8649906", … ]el problema aquí es que declaró el elemento td una vez fuera del bucle for y luego siguió cambiando y agregando el mismo elemento.
intenta modificar tu código así:
for(var i=0;i<(dataArray[0].length);i++){ var td = document.createElement("td"); td.textContent = item[I]; rbody.appendChild(td); }En su situación, ¿qué hay de modificar generateTable de la siguiente manera?
function generateTable(dataArray) { var tabledb = document.getElementById("ptable"); var tbody = document.createElement("tbody"); dataArray.forEach(function (item, index) { var len = item.length; if (index == 0) { var theaddb = document.createElement("thead"); var rhead = document.createElement("tr"); for (var i = 0; i < len; i++) { var th = document.createElement("th"); th.textContent = item[i]; rhead.appendChild(th); } theaddb.appendChild(rhead); tabledb.appendChild(theaddb); } else { var rbody = document.createElement("tr"); for (var i = 0; i < len; i++) { var td = document.createElement("td"); td.textContent = item[i]; rbody.appendChild(td); } tbody.appendChild(rbody); } }); tabledb.appendChild(tbody); }var th = document.createElement("th"); y var td = document.createElement("td"); se incluyen en el bucle for.tabledb.appendChild(tbody) se mueve fuera del bucle.