De CSV-bestandsindeling (Comma Separated Values) is een populaire manier om gegevens uit te wisselen tussen toepassingen. In deze snelle tip leren we hoe JavaScript ons kan helpen de gegevens van een CSV-bestand te visualiseren.
Een CSV-bestand maken
Laten we om te beginnen een eenvoudig CSV-bestand maken. Om dit te doen, maken we gebruik van Mockaroo, een online test data generator. Hier is ons bestand:
Een CSV-bestand omzetten in een HTML-tabel
Nu we het bestand hebben gegenereerd, zijn we klaar om het te ontleden en een bijbehorende HTML-tabel te maken.
Als eerste stap zullen we jQuery’s ajax functie gebruiken om de gegevens uit dit bestand op te halen:
$.ajax({ url: 'csv_data.csv', dataType: 'text', }).done(successFunction);
Aannemende dat het AJAX verzoek succesvol is, wordt de successFunction uitgevoerd. Deze functie is verantwoordelijk voor het parseren van de geretourneerde gegevens en het omzetten ervan in een HTML-tabel:
Het idee is om elk van de CSV-rijen om te zetten in een tabelrij. Met dat in gedachten, laten we kort uitleggen hoe de bovenstaande code werkt:
- Eerst gebruiken we een regex om de AJAX-respons te splitsen, en zo de CSV-rijen te scheiden.
- Daarna lopen we door de CSV-rijen en splitsen hun gegevensvelden.
- Ten slotte lopen we door de gegevensvelden en maken de overeenkomstige tabelcellen aan.
Voor een beter begrip van deze code, kunt u de volgende visualisatie bekijken:
Op dit punt is het belangrijk om te verduidelijken waarom we de regex /\r?\n|\r/ hebben gebruikt om de CSV-rijen te splitsen.
Zoals u waarschijnlijk al weet, zijn er verschillende weergaven van een newline tussen besturingssystemen. Bijvoorbeeld, op Windows platforms, zijn de tekens die een newline vertegenwoordigen \r\n. Door de bovenstaande regex te gebruiken, zijn we in staat om met al deze mogelijke weergaven overeen te komen.
De meeste tekstverwerkers bieden ons bovendien de mogelijkheid om de opmaak van een newline te kiezen. Neem bijvoorbeeld Notepad++. In deze editor kunnen we de gewenste opmaak voor een document opgeven door naar dit pad te navigeren:
Om dit te illustreren, beschouw ons bestand. Afhankelijk van het formaat dat we kiezen, zou het er als volgt uitzien:
Stijlen toevoegen aan de HTML-tabel
Voordat we naar de resulterende tabel kijken, voegen we er een paar basisstijlen aan toe:
Hier ziet u de gegenereerde tabel:
Hoe een CSV-bestand parseren met de Papa Parse bibliotheek
In dit gedeelte zullen we zien hoe u de Papa Parse bibliotheek kunt gebruiken om een CSV-bestand in een oogwenk te parseren! Papa Parse is een echt krachtige CSV parser die je veel configuratie opties biedt, en je kunt hem ook gebruiken voor echt grote CSV bestanden.
De Papa Parse bibliotheek is beschikbaar op npm, en als je geen npm wilt gebruiken, kun je in plaats daarvan het officiële Papa Parse npm pakket downloaden van unpkg.
Hoe het werkt
Het volgende voorbeeld laat zien hoe eenvoudig het is om een CSV string te parsen.
var results = Papa.parse(data); // data is a CSV string
De results variabele bevat de volgende inhoud.
Zoals u kunt zien, bevat Results.data een array van alle rijen. Als er tijdens het parsen fouten zijn opgetreden, staan deze in Results.errors. Tenslotte kunt u Results.meta gebruiken om meta-informatie over de CSV-string op te vragen.
Aan de andere kant, als u direct een lokaal CSV-bestand wilt parseren, kunt u een JavaScript File-object doorgeven:
Papa.parse(fileInput.files, { complete: function(results) { console.log(results); }});
En u kunt ook de URL naar een CSV-bestand op afstand doorgeven:
Papa.parse(url, { download: true, complete: function(results) { console.log(results); }});
Afgezien van de basis parsing, biedt Papa Parse nog veel meer mogelijkheden, zoals:
- streaming van grote bestanden (zodat je ze regel voor regel kunt verwerken)
- reverse parsing (om CSV uit een JavaScript object te emiteren)
- jQuery integratie
- en meer
Ik moedig je aan om deze library te verkennen, want het is echt krachtig en makkelijk te gebruiken!
Conclusie
In dit korte artikel hebben we het proces doorlopen om een CSV bestand om te zetten in een HTML tabel. Natuurlijk hadden we voor deze conversie een web-gebaseerde tool kunnen gebruiken, maar ik denk dat het altijd uitdagender is om dit te bereiken door je eigen code te schrijven.