Posiblemente una pregunta estúpida aquí. Tengo algunos datos tabulares (pueden ser de un archivo .csv, pero no necesariamente) que me gustaría generar en una página web. Idealmente, también quiero preprocesar esos datos y hacer alguna agregación primero.
Digamos, en mi archivo index.html tengo la siguiente etiqueta:
<table id="data"></table>Mientras que mi archivo script.js se ve así:
let my_data = { "Fruit": ["apple","peach","banana"], "Price": [2,3,2] }Pensé que llenar la tabla html con esos datos sería tan simple como:
document.getElementById("data").innerHTML = my_dataPero obviamente es más complicado que eso, según algunas publicaciones similares que pude encontrar.
Donde las cosas se ponen más complicadas, es que los datos tabulares en el lado script.js variarán en su número de filas y columnas, ya que tengo la intención de hacer un preprocesamiento de datos.
He considerado las siguientes bibliotecas para ayudarme con eso:
Por ejemplo, Arquero presenta un método .toHTML() , y pensé que solo tendría que crear un par de bloques <div></div> y colocar la tabla Arquero entre ellos. Pero no, no funcionará.
Estoy considerando usar la tabla de Plotly para eso, pero me pregunto si hay una manera fácil de llenar una tabla HTML con algunos datos de mi secuencia de comandos .js , teniendo en cuenta que estos datos no necesariamente tendrán la misma forma (lo que significa Puedo rellenar previamente la tabla en el lado HTML).
¿Es posible generar un objeto de tabla Arquero / Tidy.js / Data-Forge en un elemento HTML , como div o figure, etc.?
Espero que tenga sentido :)
¡Gracias!
<!-- (A) ALL WE NEED IS A <DIV> CONTAINER --> <div id="data"></div> <script> // (B) DUMMY ARRAY var my_data = ["doge", "cate", "birb", "doggo", "moon moon", "awkward seal"]; // (C) CREATE HTML TABLE // (C1) HTML TABLE ELEMENT var myTable = document.createElement("table"), row = myTable.insertRow(), cell; // (C2) LOOP THROUGH ARRAY & GENERATE ROWS-CELLS var perrow = 2; // 2 CELLS PER ROW my_data.forEach((value, i) => { // ADD CELL cell = row.insertCell(); cell.innerHTML = value; // CLICK ON CELL TO DO SOMETHING // cell.onclick = FUNCTION; // TO PASS IN A RUNNING NUMBER OR PARAMETER // cell.onclick = () => { console.log(i); }; // BREAK INTO NEXT ROW var next = i + 1; if (next%perrow==0 && next!=my_data.length) { row = myTable.insertRow(); } }); // (D) ATTACH TABLE TO CONTAINER document.getElementById("data").appendChild(myTable);