A CSV (Comma Separated Values) fájlformátum az alkalmazások közötti adatcsere népszerű módja. Ebben a gyors tippben megtanuljuk, hogyan segíthet a JavaScript egy CSV-fájl adatainak megjelenítésében.
CsV-fájl létrehozása
Kezdésként hozzunk létre egy egyszerű CSV-fájlt. Ehhez a Mockaroo, egy online tesztadat-generátor előnyeit fogjuk kihasználni. Íme a fájlunk:
CsV-fájl átalakítása HTML-táblázattá
Most, hogy létrehoztuk a fájlt, készen állunk annak elemzésére és a hozzá tartozó HTML-táblázat létrehozására.
Első lépésként a jQuery ajax funkcióját használjuk az adatok kinyerésére ebből a fájlból:
$.ajax({ url: 'csv_data.csv', dataType: 'text', }).done(successFunction);
Az AJAX-kérés sikeressége esetén a successFunction végrehajtásra kerül. Ez a függvény felelős a visszakapott adatok elemzéséért és HTML-táblává alakításáért:
Az ötlet az, hogy minden egyes CSV-sort táblázat sorává alakítsunk át. Ezt szem előtt tartva röviden elmagyarázzuk, hogyan működik a fenti kód:
- Először egy regex segítségével felosztjuk az AJAX-választ, és így szétválasztjuk a CSV-sorokat.
- Ezután végigmegyünk a CSV-sorokon, és felosztjuk az adatmezőiket.
- Végül végighaladunk az adatmezőkön, és létrehozzuk a megfelelő táblázatcellákat.
A kód jobb megértéséhez tekintse meg továbbá a következő szemléltetést:
Ezzel a ponttal kapcsolatban fontos tisztázni, hogy miért használtuk a /\r?\n|\r/ regexet a CSV sorok felosztásához.
Amint azt valószínűleg már tudja, az újsornak az operációs rendszerekben különböző ábrázolásai vannak. A Windows platformokon például az újsorjelet jelképező karakterek a \r\n. Ennek ellenére a fenti regex használatával az összes lehetséges ábrázolásnak megfelelhetünk.
A legtöbb szövegszerkesztő lehetővé teszi továbbá, hogy kiválasszuk az újsor formátumát. Vegyük például a Notepad++ programot. Ebben a szerkesztőben megadhatjuk a kívánt formátumot egy dokumentumhoz, ha erre az útvonalra navigálunk:
Az illusztráláshoz tekintsük meg a fájlunkat. Attól függően, hogy milyen formátumot választunk, így nézne ki:
Stílusok hozzáadása a HTML táblázathoz
Mielőtt megnéznénk a kapott táblázatot, adjunk hozzá néhány alapvető stílust:
Itt van a generált táblázat:
Hogyan elemezzünk egy CSV fájlt a Papa Parse könyvtárral
Ebben a részben megnézzük, hogyan használhatjuk a Papa Parse könyvtárat, hogy egy szempillantás alatt elemezzünk egy CSV fájlt! A Papa Parse egy igazán hatékony CSV-elemző, amely rengeteg beállítási lehetőséget biztosít, és igazán nagy CSV-fájlok esetén is használhatod.
A Papa Parse könyvtár elérhető az npm-en, ha pedig nem szeretnéd az npm-et használni, akkor az unpkg-ról letöltheted helyette a hivatalos Papa Parse npm csomagot.
Hogyan működik
A következő példa bemutatja, milyen egyszerű egy CSV karakterlánc elemzése.
var results = Papa.parse(data); // data is a CSV string
A results változó a következő tartalmat tartalmazza.
Mint látható, a Results.data az összes sort tartalmazó tömböt tartalmazza. Ha a tagolás során bármilyen hiba keletkezik, az a Results.errors-ben lesz. Végül a Results.meta segítségével hozzáférhet a CSV-stringre vonatkozó metainformációkhoz.
Másrészt, ha közvetlenül egy helyi CSV fájlt akar elemezni, akkor átadhat egy JavaScript File objektumot:
Papa.parse(fileInput.files, { complete: function(results) { console.log(results); }});
És átadhatja egy távoli CSV fájl URL címét is:
Papa.parse(url, { download: true, complete: function(results) { console.log(results); }});
Az alapvető elemzésen kívül a Papa Parse számos más funkciót is biztosít, például:
- nagyméretű fájlok streamelése (így soronként feldolgozhatod őket)
- visszafejtés (hogy CSV-t adj ki egy JavaScript objektumból)
- jQuery integráció
- és még sok más
Bátorítalak, hogy fedezd fel ezt a könyvtárat, mivel nagyon erős és könnyen használható!
Következtetés
Ebben a rövid cikkben végigvettük egy CSV fájl HTML táblázattá alakításának folyamatát. Természetesen használhattunk volna egy webes eszközt is ehhez az átalakításhoz, de úgy gondolom, hogy ezt mindig nagyobb kihívást jelent saját kód írásával elérni.