Анализ файла CSV с помощью JavaScript

Russian (Pусский) translation by Sergey Zhuk (you can also view the original English article)

Final product image — What You'll Be Creating

Формат файла CSV (Comma Separated Values) является популярным способом обмена данными между приложениями.

В этом кратком совете мы узнаем, как JavaScript может помочь нам визуализировать данные CSV-файла.

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

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

Преобразование файла CSV в таблицу HTML

Теперь, когда мы сгенерировали файл, мы готовы разобрать его и создать связанную таблицу HTML.

В качестве первого шага мы будем использовать функцию ajax jQuery для извлечения данных из этого файла:

1	$.ajax({
2	url: 'csv_data.csv',
3	dataType: 'text',
4	}).done(successFunction);

Если запрос AJAX выполнен успешно, функция success выполняется. Эта функция отвечает за разбор возвращаемых данных и преобразование их в таблицу HTML:

	  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 и, таким образом, разделяем строки CSV.
Затем мы перебираем строки CSV и разбиваем их поля данных.
Наконец, мы перебираем поля данных и создаем соответствующие ячейки таблицы.

Более того, чтобы лучше понять этот код, рассмотрите следующую визуализацию:

На данном этапе важно выяснить, почему мы использовали регулярно выражение/\r?\N|\r/ для разбиения строк CSV.

Как вы, наверное, уже знаете, существуют различные представления новой строки в разных операционных системах. Например, на платформах Windows символы, представляющие новую строку, - \r\n. Тем не менее, используя приведенное выше регулярное выражение, мы можем сопоставить все эти возможные представления.

Кроме того, большинство текстовых редакторов позволяют нам выбирать формат для новой строки. Возьмем, к примеру, Notepad ++. В этом редакторе мы можем указать желаемый формат документа, перейдя по этому пути:

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

Добавление стилей в таблицу HTML

Прежде, чем мы посмотрим на итоговую таблицу, добавим несколько основных стилей:

	  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. Конечно, мы могли бы использовать веб-инструмент для этого преобразования, но я думаю, что это всегда сложнее достичь, написав собственный код.