Formát souboru CSV (Comma Separated Values) je populární způsob výměny dat mezi aplikacemi. V tomto krátkém tipu se naučíme, jak nám JavaScript může pomoci vizualizovat data souboru CSV.
Vytvoření souboru CSV
Na začátek vytvoříme jednoduchý soubor CSV. K tomu využijeme Mockaroo, online generátor testovacích dat. Zde je náš soubor:
Konverze souboru CSV do tabulky HTML
Teď, když jsme soubor vygenerovali, jsme připraveni jej analyzovat a vytvořit související tabulku HTML.
Jako první krok použijeme funkci ajax jQuery k načtení dat z tohoto souboru:
$.ajax({ url: 'csv_data.csv', dataType: 'text', }).done(successFunction);
Pokud je požadavek AJAX úspěšný, provede se funkce successFunction. Tato funkce je zodpovědná za rozbor vrácených dat a jejich transformaci do tabulky HTML:
Jde o to převést každý z řádků CSV na řádek tabulky. S ohledem na to stručně vysvětlíme, jak výše uvedený kód funguje:
- Nejprve pomocí regexu rozdělíme odpověď AJAXu, a tím oddělíme řádky CSV.
- Poté projdeme řádky CSV a rozdělíme jejich datová pole.
- Nakonec projdeme datová pole a vytvoříme odpovídající buňky tabulky.
Pro lepší pochopení tohoto kódu si dále prohlédněte následující vizualizaci:
Na tomto místě je důležité objasnit, proč jsme k rozdělení řádků CSV použili regex /\r?\n|\r/.
Jak už asi víte, v různých operačních systémech existují různé reprezentace nového řádku. Například na platformách Windows jsou znaky představující nový řádek \r\n. To znamená, že pomocí výše uvedeného regexu jsme schopni porovnat všechny tyto možné reprezentace.
Většina textových editorů nám navíc umožňuje zvolit formát nového řádku. Vezměme si například Poznámkový blok++. V tomto editoru můžeme zadat požadovaný formát dokumentu tak, že přejdeme na tuto cestu:
Pro ilustraci uvažujme náš soubor. V závislosti na zvoleném formátu by vypadal takto:
Přidání stylů do tabulky HTML
Než se podíváme na výslednou tabulku, přidáme do ní několik základních stylů:
Tady je vygenerovaná tabulka:
Jak analyzovat soubor CSV pomocí knihovny Papa Parse
V této části si ukážeme, jak můžete pomocí knihovny Papa Parse bleskově analyzovat soubor CSV! Papa Parse je opravdu výkonný parser CSV, který vám poskytuje mnoho možností konfigurace a můžete jej použít i pro opravdu velké soubory CSV.
Knihovna Papa Parse je k dispozici na npm, a pokud nechcete používat npm, můžete si místo toho stáhnout oficiální balíček Papa Parse npm z unpkg.
Jak to funguje
Následující příklad ukazuje, jak snadno lze analyzovat řetězec CSV.
var results = Papa.parse(data); // data is a CSV string
Proměnná results obsahuje následující obsah.
Jak vidíte, Results.data obsahuje pole všech řádků. Pokud se při parsování vyskytnou nějaké chyby, budou v Results.errors. Nakonec můžete pomocí Results.meta získat přístup k metainformacím o řetězci CSV.
Na druhou stranu, pokud chcete přímo analyzovat místní soubor CSV, můžete předat objekt JavaScript File:
Papa.parse(fileInput.files, { complete: function(results) { console.log(results); }});
A můžete také předat adresu URL vzdáleného souboru CSV:
Papa.parse(url, { download: true, complete: function(results) { console.log(results); }});
Kromě základního parsování poskytuje Papa Parse mnoho dalších funkcí, např:
- streamování velkých souborů (takže je můžete zpracovávat řádek po řádku)
- reverzní parsování (pro vysílání CSV z objektu JavaScriptu)
- integraci s jQuery
- a další
Doporučuji vám tuto knihovnu prozkoumat, protože je opravdu výkonná a snadno použitelná!
Závěr
V tomto krátkém článku jsme prošli proces převodu souboru CSV na tabulku HTML. Samozřejmě jsme pro tento převod mohli použít nějaký webový nástroj, ale myslím, že je vždy náročnější dosáhnout tohoto cíle napsáním vlastního kódu.