Парсинг CSV с помощью JavaScript

Создание CSV-файла

Для начала нам необходимо создать простой CSV-файл. Для этого мы воспользуемся онлайн-инструментом для генерации тестовых данных по названием Mockaroo.

Mockaroo сгенерирует файл, примерно следующего содержания:

Отображение данных в виде HTML-таблицы на веб-странице

Теперь, когда у нас готов CSV-файл, мы можем распарсить его и представить данные из файла в виде таблицы. Первым делом, воспользуемся методом $.ajax из библиотеки jQuery, чтобы загрузить данные из нашего файла.

JavaScript

$.ajax({
  url: 'demo_data.csv',
  dataType: 'text',
}).done(successFunction);

Если AJAX отработает правильно, то будет выполнена функция под названием successFunction(). Эта функция предназначена для создания HTML-таблицы и размещения в ней данных, полученных из файла.

JavaScript

function successFunction(data) {
  var allRows = data.split(/\r?\n|\r/);
  var table = '<table>';
  for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
    if (singleRow === 0) {
      table += '<thead>';
      table += '<tr>';
    } else {
      table += '<tr>';
     }
     var rowCells = allRows[singleRow].split(',');
     for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
       if (singleRow === 0) {
         table += '<th>';
         table += rowCells[rowCell];
         table += '</th>';
       } else {
         table += '<td>';
         table += rowCells[rowCell];
         table += '</td>';
       }
    }
     if (singleRow === 0) {
       table += '</tr>';
       table += '</thead>';
       table += '<tbody>';
     } else {
       table += '</tr>';
     }
  } 
  table += '</tbody>';
  table += '</table>';
  $('body').append(table);
}

Наша цель: поместить каждую строку CSV-файла в соответствующую строку таблицы. Давайте рассмотрим представленный выше код, чтобы понять как он работает и достигает нашей цели.

• Сначала мы преобразуем данные, полученные AJAX'ом из файла в массив строк (используем метод split);
• Затем обходим массив в цикле этот массив и преобразуем каждую строку в массив ячеек (используем метод split)
• Затем также используем цикл для обхода массива ячеек. В процессе этого помещаем значения элементов массива в ячейки таблицы.

Чтобы лучше понять как это работает, рассмотрим следующее изображение.

Обратите внимание, что на первом шаге мы разделяем данные из файла с помощью следующего регулярного выражения: /\r?\n|\r/.

Возможно вы знаете, что управляющие символы, обозначающие «перевод строки» выглядят по-разному в разных операционных системах. Например, в ОС Windows «перевод строки» обозначается символами \r\n, а с помощью представленного выше регулярного выражения, мы можем сравнить различные варианты управляющих символов.

Кстати говоря, большинство редакторов позволяют выбирать формат конца строк. Например, в Notepad++, вы можете сделать это в меню «Правка» (Правка→Формат конца строки)

Чтобы проиллюстрировать это, рассмотрим наш файл. В зависимости от формата, который мы выбираем, это будет выглядеть следующим образом.

Стилизуем таблицу.

Перед просмотром результата нашей работы нужно «украсить» таблицу, добавив немного CSS-стилей.

CSS

table {
  margin: 0 auto;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid #d4d4d4;
}
 
tr:nth-child(even) {
  background: #d4d4d4;
}
 
th, td {
  padding: 10px 30px;
}
 
th {
  border-bottom: 1px solid #d4d4d4;
}

Итак, вот результат нашей работы.

Заключение

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

Демо-страница

Оригинал статьи