将CSV从实时网址解析为HTML表

Question

Where can I get an example of a simple way to retrieve a CSV file from a URL and put the contents into my HTML body? Just a simple JavaScript or jquery to automatically pull the latest CSV contents online and run it through my html script and put table tags around each line of the CSV. That way when the CSV file is published, for example google sheets CSV output, the website will show the table with the updated contents.

I have tried looking at tutorials online but most revolve around converting a physical file or uploading a local path but nothing from a public URL.

If this is not a fair question just tell me before down voting me so I can delete it if need be.

Answer 1

You don't need to change anything if you want to look at a public file - you just do this with jQuery:

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

Then you can do whatever you want with this line:

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

To make the data look good on your page.

Answer 2

Here is example of using google sheet to draw html

You get your data with ajax. In this case axios and then parse it.

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

});