Entonces, realmente no soy un tipo de JS en lo más mínimo, pero básicamente quería representar un CSV como tabla en mi sitio Jekyll; tengo esto trabajando con el siguiente script.
El único problema es que nunca parece cargar la tabla por primera vez, necesito hacer clic en Actualizar en el navegador para que aparezca. ¿Alguien tiene alguna idea de cuál podría ser la causa de esto?
<script> window.onload = function() { with(new XMLHttpRequest()) { onreadystatechange = cb; open('GET', 'https://raw.githubusercontent.com/clintjb/A350-Tracking/main/flight_data_a350.csv', true); responseType = 'text'; send(); } } function cb() { if (this.readyState === 4) document.getElementById('A350') .innerHTML = tbl(this.responseText); } function tbl(csv) { return csv.split('\n') .map(function(tr, i) { return '<tr><td>' + tr.replace(/,/g,'</td><td>') + '</td></tr>'; }) .join('\n'); } </script> <table border="0" style='font-size:50%' id="A350"></table>No pude recrear el problema en mi máquina. Su código funcionó bien para mí, al menos en Chrome, pero una cosa que podría intentar es usar fetch en lugar de XMLHttpRequest. ambos trabajaron para mi
Eso sería algo como lo siguiente
<script> fetch('https://raw.githubusercontent.com/clintjb/A350-Tracking/main/flight_data_a350.csv' ).then((response) => { return response.text(); }).then((text) => { document.getElementById('A350').innerHTML = tbl(text); }) function tbl(csv) { return csv.split('\n') .map(function (tr, i) { return '<tr><td>' + tr.replace(/,/g, '</td><td>') + '</td></tr>'; }) .join('\n'); } </script> <table border="0" style='font-size:50%' id="A350"></table>Entonces, todas las soluciones (incluida mi primera propuesta) realmente funcionaron. El problema al final fue en realidad un error extraño en la plantilla utilizada en el sitio de Jekyll.
Si fue directamente a la página, se reprodujo bien, si la actualizó, se reprodujo bien, solo iba a través de los menús, lo que causaría el problema de representación.
Debido a esto, cambié el enfoque y usé acciones de GitHub para enviar el archivo todos los días: con el CSV en el mismo repositorio que (por ejemplo, como en _data/my_file.csv) puede acceder a los datos cuando el sitio se compila como
{{ site.data.my_csv }}