Auteur: Danny Holstein

Vele jaren geleden heb ik voor de eerste keer gewerkt met CSV bestanden. Dit bleek een relatief eenvoudige manier om veel data te importeren en exporteren. Voor een aantal projecten van de BEE-organisation heb ik functionaliteit toegevoegd voor CSV bestanden. In dit nieuwe blogbericht wordt het gebruik en twee gebruikerszaken nader behandeld.

CSV staat voor Comma Separated Values – of in het Nederlands: ‘door komma gescheiden waardes’. De eerste regel van een CSV bestand zijn de headers die optioneel zijn. Gewoonlijk zijn de waardes in een CSV bestand gescheiden door komma’s, maar andere scheidingstekens zijn ook mogelijk (zoals puntkomma’s). Een CSV bestand kan 1 of meerdere regels/records bevatten.

Wanneer een bepaalde waarde een komma van zichzelf bevat, dan is er een enclosing karakter nodig. Het enclosing karakter is gewoonlijk het dubbele aanhalingsteken, maar kan ook worden aangepast in een ander karakter. In de afbeelding hieronder zijn: id,title de headers – en in de zin: Een test met een komma: , - wordt aan het begin en het einde een enclosing karakter gebruikt zodat er wordt aangegeven dat dit bij elkaar hoort.

In bijzondere gevallen kan een bepaalde waarde ook een dubbel aanhalingsteken bevatten en in zulke gevallen wordt het dubbele aanhalingstekens ge-escaped door middel van een ander dubbel aanhalingsteken. De zin is veranderd in: Een test met een komma en een “citaat” – en na het opslaan zal het CSV bestand er als volgt uitzien:

CSV bestanden zijn op verschillende manieren te maken. Dit kan met Office365 Excel, Open Office, kladblok/notepad en verschillende libraries van programmeertalen. Open Office is hiervoor een betere tool dan Office365 Excel, want bij de eerste kan makkelijker de karakterset (zoals UTF-8 – van belang wanneer de data is bestemd voor een database) worden opgegeven. Ook respecteert Open Office andere scheidingskarakters beter dan Office365 Excel, waarbij de laatste de cellen ongevraagd zal blijven openbreken. Wel maken zowel Office365 Excel als Open Office een CSV bestand op in cellen en dus ziet het er niet uit zoals de ‘ruwe’ opmaak in de twee afbeeldingen hierboven.

Toen ik als programmeur begon, ben ik voor de eerste keer in aanraking gekomen met CSV bestanden. Voor een opdracht kon ik gebruikmaken van een native function van PHP om een CSV bestand te laden en de data op het scherm te tonen. Andere programmeertalen hebben vergelijkbare functies en of libraries. Een voorbeeld hiervan is Java die onder andere de library opencsv heeft om CSV bestanden te laden en op te slaan.

Ik ben een aantal jaren werkzaam geweest als een webmaster van een sieradenwebwinkel. Dit betrof een webwinkel die gebruik maakte van het Magento Framework. Er was de optie om handmatig ieder product in te voeren, maar hierdoor werd al snel ‘in de tredmolen gelopen’, dit wil zeggen dat zulke werkzaamheden al snel een geestdodende sleur worden. Het importeren van CSV bestanden met de producten voor de webwinkel was een beter alternatief.

In Java had ik mijn eigen CSV maker gemaakt, waarmee op een makkelijkere manier CSV bestanden gegenereerd werden. Dit programma concentreerde zich op de velden die van belang waren voor een product, zoals het artikelnummer (sku – stock keeping unit) de titel, de beschrijving en de prijs – de rest van de velden werden automatisch ingevuld op basis van de ingevulde gegevens. Aan de rechterzijde stonden kant-en-klare zinnen die met een enkele muisklik ingevoerd konden worden. Alsook zaten in CSV maker allerlei andere handige ‘snufjes’ en een Line Factory die heel veel typewerk uit handen nam.

Door andere werkzaamheden onderhoud ik CSV maker niet meer. Wel heb ik door middel van het importeren van CSV bestanden in mijn eentje een ‘klein Zalando van de sieradenwebwinkels’ weten te realiseren. Een gezegde is dat ‘een webwinkel geen carrière is’, maar dat is het dus overduidelijk wel 😊. Met mijn eigen CSV maker zijn veel producten ingevoerd dat handmatig simpelweg ondoenlijk is. De invoer van producten voor de Magento webwinkel was een leuke (nostalgische) werkzaamheid.

In een eerder blogbericht, namelijk met de titel: Angular 18 – een tussenstand en korte terugblik – heb ik vermeld dat ik in december 2022 voor de eerste keer met Angular in aanraking ben gekomen. Rond die tijd heb ik geëxperimenteerd met Angular applicaties waaronder het laden van CSV bestanden. Dit kwam later van pas, hetzij niet meer voor het invoeren van producten, maar wel voor het invoeren van onder andere persoonsgegevens.

De Angular applicatie maakte gebruik van Angular 15 tijdens de eerste commit naar GitHub. Later heb ik deze geüpdatet en geüpgrade naar Angular 19. Hierbij zijn de recentste technieken opgenomen, zoals: signals en injects. In de eerste versie van de applicatie werd data uit een CSV bestand geladen en opgelost als Promise, maar dit is niet gangbaar binnen Angular. In een latere versie van de applicatie wordt een CSV bestand wel geladen als Observable dat beter aansluit op de gangbare programmeerpraktijken van Angular.

De kern van de Angular applicatie is de loadCsvFile methode. Dit accepteert een CSV bestand en de CSV instellingen (separator, enclosing, karakterset) als argumenten. Er kunnen fouten worden afgehandeld, wanneer een CSV bestand te veel of te weinig kolommen heeft. De Angular applicatie houdt er rekening mee dat de headers optioneel kunnen zijn. De eerste stap is om de ruwe data te splitsen op basis van regelafbrekingen, vervolgens wordt er per regel gekeken naar de indexen van de separators (separators binnen een enclosing worden genegeerd) en tenslotte wordt de data van de kolommen/cellen opgeslagen in een array.

De applicatie bevat ook voorbeelddata in de assets-folder. Om zaken uit te testen is er gebruik gemaakt van een van de vele CSV bestanden die gebruikt werden voor de webwinkel. Zie de afbeelding hieronder:

Later heb ik functionaliteit toegevoegd om een CSV bestand te kunnen maken in de browser. Voor een aantal projecten van de BEE-organisation wordt de loadCsvFile methode opnieuw gebruikt. Dit is vooral het geval bij de invoer van persoonsgegevens, dat door de veelheid aan velden al snel een taak wordt waarbij iedereen ‘hoofdpijn, grijze haren en haaruitval’ krijgt.

In dit blogbericht heb ik twee gebruikerszaken behandeld waar CSV bestanden werden gebruikt. Een alternatieve titel voor dit blogbericht had dan ook ‘old habits die hard’ kunnen zijn. Door middel van een CSV bestand is op een eenvoudige manier veel data te importeren en te exporteren. Deze functionaliteit komt van pas in verscheidene projecten en lost bepaalde gebruikerszaken eenvoudig op.