Format pliku CSV (Comma Separated Values) jest popularnym sposobem wymiany danych między aplikacjami. W tym krótkim poradniku dowiemy się, jak JavaScript może pomóc nam w wizualizacji danych z pliku CSV.
Tworzenie pliku CSV
Na początek, stwórzmy prosty plik CSV. Aby to zrobić, skorzystamy z Mockaroo, internetowego generatora danych testowych. Oto nasz plik:
Konwersja pliku CSV do tabeli HTML
Gdy już wygenerowaliśmy plik, jesteśmy gotowi do jego przetworzenia i zbudowania powiązanej z nim tabeli HTML.
W pierwszym kroku użyjemy funkcji ajax jQuery, aby pobrać dane z tego pliku:
$.ajax({ url: 'csv_data.csv', dataType: 'text', }).done(successFunction);
Zakładając, że żądanie AJAX jest udane, zostanie wykonana funkcja successFunction. Funkcja ta jest odpowiedzialna za parsowanie zwróconych danych i przekształcenie ich w tabelę HTML:
Pomysł polega na przekształceniu każdego z wierszy CSV w wiersz tabeli. Mając to na uwadze, wyjaśnijmy pokrótce, jak działa powyższy kod:
- Najpierw używamy regexa do podzielenia odpowiedzi AJAX, a tym samym oddzielenia wierszy CSV.
- Następnie wykonujemy iterację po wierszach CSV i dzielimy ich pola danych.
- Na koniec wykonujemy pętlę po polach danych i tworzymy odpowiadające im komórki tabeli.
Ponadto, aby lepiej zrozumieć ten kod, rozważ następującą wizualizację:
W tym momencie ważne jest, aby wyjaśnić, dlaczego użyliśmy regexu /\r?\n|\r/ do podzielenia wierszy CSV.
Jak zapewne już wiesz, istnieją różne reprezentacje nowej linii w różnych systemach operacyjnych. Na przykład, na platformach Windows, znaki reprezentujące nową linię to \r\n. W związku z tym, używając powyższego regexa, jesteśmy w stanie dopasować wszystkie te możliwe reprezentacje.
W dodatku, większość edytorów tekstu pozwala nam wybrać format nowej linii. Weźmy na przykład Notepad++. W tym edytorze możemy określić pożądany format dokumentu, przechodząc do tej ścieżki:
Aby to zobrazować, rozważmy nasz plik. W zależności od wybranego przez nas formatu, wyglądałby on tak:
Dodawanie stylów do tabeli HTML
Zanim spojrzymy na wynikową tabelę, dodajmy do niej kilka podstawowych stylów:
Oto wygenerowana tabela:
Jak parsować plik CSV za pomocą biblioteki Papa Parse
W tej sekcji zobaczymy, jak można użyć biblioteki Papa Parse do parsowania pliku CSV w mgnieniu oka! Papa Parse jest naprawdę potężnym parserem CSV, który zapewnia wiele opcji konfiguracyjnych i można go używać również do naprawdę dużych plików CSV.
Biblioteka Papa Parse jest dostępna w npm, a jeśli nie chcesz używać npm, możesz pobrać oficjalny pakiet Papa Parse npm z unpkg.
Jak to działa
Następujący przykład demonstruje, jak łatwo jest parsować ciąg CSV.
var results = Papa.parse(data); // data is a CSV string
Zmienna results przechowuje następującą zawartość.
Jak widać, Results.data przechowuje tablicę wszystkich wierszy. Jeśli wystąpią jakieś błędy podczas parsowania, znajdą się one w Results.errors. Wreszcie, możesz użyć Results.meta, aby uzyskać dostęp do meta informacji o łańcuchu CSV.
Z drugiej strony, jeśli chcesz bezpośrednio parsować lokalny plik CSV, możesz przekazać obiekt JavaScript File:
Papa.parse(fileInput.files, { complete: function(results) { console.log(results); }});
I możesz również przekazać URL do zdalnego pliku CSV:
Papa.parse(url, { download: true, complete: function(results) { console.log(results); }});
Oprócz podstawowego parsowania, Papa Parse zapewnia wiele innych funkcji, takich jak:
- streaming dużych plików (dzięki czemu można je przetwarzać linia po linii)
- reverse parsing (aby emitować CSV z obiektu JavaScript)
- jQuery integration
- and more
Zachęcam do poznania tej biblioteki, ponieważ jest naprawdę potężna i łatwa w użyciu!
Zakończenie
W tym krótkim artykule, przeszliśmy przez proces konwersji pliku CSV na tabelę HTML. Oczywiście, mogliśmy użyć do tej konwersji jakiegoś narzędzia internetowego, ale myślę, że zawsze trudniej jest to osiągnąć pisząc własny kod.