Question

0

547

Views

Rellenar la tabla HTML con datos de Google Sheet (filas y columnas)

Tener problemas con lo que podría ser una solución bastante fácil.

Contexto : actualmente, mi código extrae datos de Hojas de cálculo de Google, crea algún tipo de tabla y la envía de vuelta a HTML, donde vuelve a llenar una tabla ya existente.
Problema : no puedo hacerlo para que construya columnas y filas. Pega todos los datos de una sola vez (ver imagen para el contexto).
Archivos : GS y HTML. Creo que el problema está en cómo estoy elaborando la mesa. Sé que la disposición actual de '' no tiene sentido, pero

Tabla HTML con valores de Gsheet:

Tabla Gsheet original:

secuencia de comandos de Google

 function populateStratTb2(){ var tablerows = SpreadsheetApp.getActive().getSheetByName('supp_str').getRange(1, 5, 1000).getValue(); var tablevalues = SpreadsheetApp.getActive().getSheetByName('supp_str').getRange(4, 1, tablerows).getValues(); var tvlen = tablevalues.length var active = SpreadsheetApp.getActive(); var sheet = active.getSheetByName("supp_str"); var myRange = sheet.getRange("d3:m" + tvlen); var data = myRange.getValues(); var optionsHTML = ""; for ( var r = 0; r < 10; r+=1) { for (var i = 0; i < data.length; i+=1) { optionsHTML += '<tr><td>' + data[i][r] + '</td></tr>'; }}; return optionsHTML; }

Guión HTML

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ google.script.run .withSuccessHandler(displayData) .populateStratTb2(); }); function displayData(hl){ document.getElementById('strattable').innerHTML=hl; } console.log('MyCode'); </script>

PD. Pasé un buen par de horas desplazándome por el foro seleccionando bits y mejorando mi código original. Estoy seguro de que esta pregunta (o similar) ya ha sido respondida, pero no puedo encontrarla.

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-24T17:51:37.887Z

En su guión, ¿qué tal las siguientes modificaciones?

Modificación 1:

Si se usa su ciclo for, ¿qué tal la siguiente modificación?

 function populateStratTb2() { var sheet = SpreadsheetApp.getActive().getSheetByName('supp_str'); var tablerows = sheet.getRange(1, 5, 1000).getValue(); var tablevalues = sheet.getRange(4, 1, tablerows).getValues(); var tvlen = tablevalues.length var myRange = sheet.getRange("d3:m" + tvlen); var data = myRange.getValues(); var optionsHTML = ""; for (var r = 0; r < 10; r += 1) { var row = ""; for (var i = 0; i < data.length; i += 1) { row += '<td>' + data[i][r] + '</td>'; } optionsHTML += '<tr>' + row + '</tr>'; } optionsHTML = '<table border="1" style="border-collapse: collapse">' + optionsHTML + "</table>"; return optionsHTML; }

Me preocupa que su bucle for no sea el resultado esperado. Por lo tanto, me gustaría proponer una secuencia de comandos modificada más como "Modificación 2".

Modificación 2:

Si sus data se convierten a la tabla HTML, ¿qué tal la siguiente modificación?

 function populateStratTb2() { var sheet = SpreadsheetApp.getActive().getSheetByName('supp_str'); var tablerows = sheet.getRange(1, 5, 1000).getValue(); var tablevalues = sheet.getRange(4, 1, tablerows).getValues(); var tvlen = tablevalues.length var myRange = sheet.getRange("d3:m" + tvlen); var data = myRange.getValues(); var optionsHTML = '<table border="1" style="border-collapse: collapse">' + data.reduce((s, r) => s += "<tr>" + r.map(c => `<td>${c}</td>`).join("") + "</tr>", "") + "</table>"; return optionsHTML; }

Nota:

Si no desea agregar el borde, modifique <table border="1" style="border-collapse: collapse"> a <table> .

De su respuesta, agregué 2 scripts de muestra para el script para obtener el mismo resultado de reduce y for loop de la siguiente manera.

reduce

 var optionsHTML = '<table border="1" style="border-collapse: collapse">' + data.reduce((s, r) => s += "<tr>" + r.map(c => `<td>${c}</td>`).join("") + "</tr>", "") + "</table>";

for loop

 var optionsHTML = ""; for (var r = 0; r < data.length; r++) { var row = ""; for (var c = 0; c < data[r].length; c++) { row += '<td>' + data[r][c] + '</td>'; } optionsHTML += '<tr>' + row + '</tr>'; } optionsHTML = '<table border="1" style="border-collapse: collapse">' + optionsHTML + "</table>";

Referencia:

reducir()

0

547