WedX - журнал о программировании и компьютерных науках

Динамическая таблица HTML из файла CSV

У меня есть простой файл csv. Пример данных приведен ниже (sample.csv).

date,team_1,team_2
2019-06-12,AUS,PAK
2019-06-13,IND,NZ

Я хочу, чтобы приведенное выше отображалось как table на странице HTML, чтобы новые строки автоматически добавлялись в таблицу по мере добавления новой записи в файл csv.

Может ли кто-нибудь помочь мне с очень простым решением?

EDIT: На основе ответа на этот вопрос, я написал (скопировал) следующий фрагмент кода, но кроме первой строки он ничего не показывает.

function createTable() {
  var array = [
    ["date","team_1","team_2"],
    ["2019-06-12","AUS","PAK"],
    ["2019-06-13","IND","NZ"]
  ];
  var content = "";
  array.forEach(function(row) {
    content += "<tr>";
    row.forEach(function(cell) {
      content += "<td>" + cell + "</td>";
    });
    content += "</tr>";
  });
  document.getElementById("t1").innerHTML = content;
}
createTable()
<table id="t1"> </table>

csv html html-table
13.06.2019

  • Спасибо @mplungjan! У меня очень ограниченные знания HTML и JS, и я просмотрел более или менее все вопросы и лучшие ответы, полученные из поиска Google по этой теме. Однако я не смог эффективно использовать ни один из них для решения своей проблемы, вероятно, из-за незнания этой технологии. Поэтому я был бы очень признателен за конкретную помощь, если это возможно. 13.06.2019
  • Что касается вопроса SO, помеченного как дубликат, я это видел. У меня есть 2 вопроса: (1) как заставить функцию createTable() читать файл CSV вместо жестко запрограммированного массива и (2) как мне вызвать эту функцию из <table>, чтобы строки и ячейки заполнялись на основе content. 13.06.2019
  • Смотрите мое обновление - я сделал вам фрагмент. и снова открыл вопрос 13.06.2019
  • ТАК предпочитает ОДИН вопрос за раз 13.06.2019
  • Итак, чтобы получить данные, вам нужно разделить на \n, а затем разделить на запятую 13.06.2019
  • Благодарю вас! Я возьму это как ссылку и буду работать над этим. Очень ценю вашу помощь. 13.06.2019

Ответы:


1

Здесь этот код работает правильно. Откройте файл file.csv, как вы описали. Когда вы добавляете или удаляете строку в CSV, она работает соответствующим образом на HTML-странице.

var init;
    const logFileText = async file => {
        const response = await fetch(file);
        const text = await response.text();
        all = text.split('\n');
        if (init !== all.length) {
            //console.log(all.length, init);
            init = all.length;
            //console.log('changed');
            var arr=[];
            all.forEach(el => {
                el=el.split(',');
                arr.push(el);
            });
            // console.log(arr);

            createTable(arr);

        }

    }

    function createTable(array) {
        var content = "";
        array.forEach(function (row) {
            content += "<tr>";
            row.forEach(function (cell) {
                content += "<td>" + cell + "</td>";
            });
            content += "</tr>";
        });
        document.getElementById("t1").innerHTML = content;
    }

    var file = 'file.csv';
    logFileText(file);
    setInterval(async () => {
        await logFileText(file);
    }, 2000);

<table id="t1"> </table>
28.07.2019
  • Это интересная проблема, которую я решил. Я чувствую удовольствие. 28.07.2019
    • Новые материалы
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
    ИИ в аэрокосмической отрасли
    Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..
    Для любых предложений по сайту: [email protected]