CSV 填充 Table（通过 JS）直到手动刷新才在浏览器中加载视图

Question

所以我一点儿也不是 JS 专家，但我想在我的 Jekyll 网站上将 CSV 渲染为 table - 我使用以下脚本来处理它。

唯一的问题是它似乎从来没有第一次加载 table，我需要在浏览器中单击刷新才能显示它 - 有人知道这可能是什么原因吗？

<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>

Answer 1

我无法在我的机器上重现该问题。你的代码对我来说工作得很好，至少在 chrome，但是您可以尝试使用 fetch 而不是 XMLHttpRequest。都对我有用

看起来像下面这样

<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>

Answer 2

所以所有的解决方案（包括我的第一个提议）实际上都奏效了。最后的问题实际上是Jekyll网站上使用的模板中的一个奇怪的错误。

如果您直接进入该页面，它呈现良好，如果您刷新它呈现良好 - 只是通过菜单，这会导致呈现问题。

因此，我更改了方法并使用 GitHub 操作每天推送文件 - CSV 与您在同一回购中（例如像在 _data/my_file.csv 中一样）建站时可以访问数据

{{ site.data.my_csv }}

CSV 填充 Table（通过 JS）直到手动刷新才在浏览器中加载视图

CSV Filled Table (Via JS) Not Loading View In Browser Until Manual Refresh

javascript

csv

jekyll