Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

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

by
Difficulty:IntermediateLength:ShortLanguages:

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 - онлайновым генератором тестовых данных. Вот наш файл:

Initial-CSV-File

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

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

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

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

Итак, идея состоит в том, чтобы преобразовать каждую из строк CSV в строку таблицы. Имея это в виду, давайте кратко объясним, как работает вышеприведенный код:

  • Во-первых, мы используем регулярное выражение для разделения ответа AJAX и, таким образом, разделяем строки CSV.
  • Затем мы перебираем строки CSV и разбиваем их поля данных.
  • Наконец, мы перебираем поля данных и создаем соответствующие ячейки таблицы.

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

CSV-Representation

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

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

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

Notepad++-EOL

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

CSV-EOL

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

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

Вот сгенерированная таблица:

Generated-Table

Заключение

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.