將CSV從實時網址解析為HTML表

Question

在哪里可以找到從URL檢索CSV文件並將內容放入HTML正文的簡單方法的示例？ 只需一個簡單的JavaScript或jquery，即可自動在線提取最新的CSV內容，並通過我的html腳本運行它，並將表格標簽放在CSV的每一行周圍。 這樣，當發布CSV文件（例如Google表格CSV輸出）時，網站將顯示帶有更新內容的表格。

我嘗試過在線查看教程，但大多數都圍繞轉換物理文件或上傳本地路徑進行，但都沒有公開URL。

如果這不是一個公平的問題，請在拒絕我之前告訴我，這樣我就可以刪除它。

Answer 1

如果要查看公共文件，則無需更改任何內容-只需使用jQuery即可：

$.ajax({
    url: "https://upload.cat/e307f4f114696856",
    dataType: "text"
}).done(function(data) {
    $("body").append(data);
});

然后，您可以使用此行執行任何操作：

$("body").append(data);

為了使數據在頁面上看起來不錯。

Answer 2

這是使用Google表格繪制HTML的示例

您可以使用ajax獲取數據。 在這種情況下，axios然后對其進行解析。

var app = new Vue({
el: '#app',
mounted() {
    let vm = this
    axios
        .get(
            'https://sheets.googleapis.com/v4/spreadsheets/1zIVCVA0Tk5CvAiTyeAdDBPygT3aKDiSeM2FbPU0JO2c/values/Specials!A2:D20?key=AIzaSyBhiqVypmyLHYPmqZYtvdSvxEopcLZBdYU'
        )
        .then(function (response) {
            let specials = response.data.values
            for (let index = 0; index < specials.length; index++) {
                const element = specials[index]
                let mitem = {
                    name: element[0],
                    description: element[1],
                    price: element[2]
                }
                if (vm.isEven(index)) {
                    vm.menuItems_L = vm.menuItems_L.concat(mitem)
                } else {
                    vm.menuItems_R = vm.menuItems_R.concat(mitem)
                }
            }
            console.log(response)
        })
},
data: {
    menuItems_L: [],
    menuItems_R: [],
    menuStyle: {
        background: '#ffe6d1',
        color: '#000'
    },
    dotStyle: {
        backgroundImage: 'radial-gradient(' + this.color + ' 1px, transparent 0px)'
    }
},
computed: {},
methods: {
    isEven: function (n) {
        return n % 2 == 0
    }
}

}）;