Разбор CSV из живого URL в HTML-таблицу

Question

Где я могу получить пример простого способа извлечь файл CSV из URL-адреса и поместить содержимое в мое тело HTML?Просто простой JavaScript или jquery для автоматического извлечения последнего содержимого CSV онлайн и запуска его через мой html-скрипт и размещения табличных тегов вокруг каждой строки CSV.Таким образом, когда CSV-файл будет опубликован, например, вывод CSV на Google-листах, веб-сайт покажет таблицу с обновленным содержимым.

Я пытался смотреть учебники в Интернете, но большинство вращается вокруг преобразования физического файла или загрузки локального пути, но ничего из общедоступного URL.

Если это не честный вопрос, просто скажите мне, прежде чемпроголосовал против меня, чтобы я мог удалить его, если это будет необходимо.

Answer 1

Вот пример использования 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
    }
}

});

Answer 2

Вам не нужно ничего менять, если вы хотите просмотреть публичный файл - вы просто делаете это с помощью jQuery:

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

Тогда вы можете делать все, что захотите, с этой строкой:

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

Чтобы данные хорошо выглядели на вашей странице.