В этом посте я собираюсь поделиться навыком, который я недавно изучил, выполняя задание. До сих пор я никогда не работал над проектом, который требовал бы от меня чтения данных из файла csv вместо базы данных с помощью JavaScript. Здесь я собираюсь поделиться одним из способов сделать это с помощью HTML5 и Papa parse library.
Papa parse — это библиотека JavaScript для быстрого парсинга CSV в браузере. Известно, что он очень надежен и прост в анализе файлов CSV, поскольку предоставляет больше дополнительных функций или опций. Он поддерживается большинством современных браузеров. Вы можете проверить Документацию Papa parse, чтобы узнать обо всех возможностях.
Подход, который я использовал, включает в себя сначала загрузку CSV-файла с использованием элемента HTML5 <input type="file">, а затем использование Papa parse для анализа файла, который можно использовать для дальнейшей обработки, такой как отправка его на сервер для сохранения данных в базе данных или отображения данных в таблице.
Шаг 1
создайте html-файл и включите файл синтаксического анализа Papa в раздел head. Вы можете назвать свой файл index.html или как хотите.
Шаг 2
Добавьте HTML-форму для загрузки файла в формате csv на index.html
Как видно из приведенного выше кода, я добавил некоторую проверку во входной файл, добавив атрибут required и приняв только файл с расширением .csv.
Вывод в браузере
Шаг 3
создайте файл js script.js, который будет иметь логику кода для анализа данных csv с использованием метода Papa.parse. Метод принимает file object и config object в качестве аргументов. Объект конфигурации определяет параметры, поведение и обратные вызовы, используемые во время синтаксического анализа. Ниже приведены свойства объекта конфигурации по умолчанию:
Описание каждого объекта можно найти здесь. В этом посте мы будем использовать только два свойства: header, которому мы установим значение true, чтобы интерпретировать первую строку проанализированных данных как имена свойств или полей, и каждая строка CSV-файла будет объектом значений. вводится по имени поля. Второе свойство, которое мы здесь будем использовать, — это complete, которое представляет собой функцию обратного вызова, выполняемую после завершения синтаксического анализа. Обратный вызов принимает проанализированные результаты в качестве аргумента.
Приведенный выше код в файле script.js будет выполняться после того, как пользователь отправит свой CSV-файл.
Теперь у нас есть программа для разбора CSV-файлов. После того, как файл проанализирован, вы можете манипулировать данными так, как хотите, чтобы удовлетворить требования вашего проекта. В качестве демонстрации давайте проанализируем следующий CSV-файл sample.csv.
Вот проанализированная структура данных после запуска программы:
Вот ссылка на исходный код:
Я надеюсь, что вы найдете этот пост полезным.
До скорого,
Удачного кодирования/обучения !!
Первоначально опубликовано на https://vanessuniq.github.io 21 марта 2021 г.
