Een CSV-bestand parseren met JavaScript

Wat je gaat creëren

Het CSV-bestand (Comma Separated Values) is een populaire manier om gegevens uit te wisselen tussen applicaties.

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, zullen we profiteren van Mockaroo, een online generator voor testgegevens. Dit is ons bestand:

Een CSV-bestand converteren naar een HTML-tabel

Nu we het bestand hebben gegenereerd, zijn we klaar om het te analyseren en een bijbehorende HTML-tabel te maken.

Als eerste stap gebruiken we jQuery's Ajax functie om de gegevens uit dit bestand op te halen:

 $ .Ajax (url: 'csv_data.csv', dataType: 'text',). Gedaan (successFunction); 

Ervan uitgaande dat de AJAX-aanvraag succesvol is, is de successFunction is geëxecuteerd. Deze functie is verantwoordelijk voor het parseren van de geretourneerde gegevens en deze om te zetten in een HTML-tabel:

 function successFunction (data) var allRows = data.split (/ \ r? \ n | \ r /); var table = ''; for (var singleRow = 0; singleRow < allRows.length; singleRow++)  if (singleRow === 0)  table += ''; tabel + = '';  else table + = '';  var rowCells = allRows [singleRow] .split (','); voor (var rowCell = 0; rowCell < rowCells.length; rowCell++)  if (singleRow === 0)  table += '';  else table + = '';  if (singleRow === 0) table + = ''; tabel + = ''; tabel + = '';  else table + = '';  tabel + = ''; tabel + = '
'; table + = rowCells [rowCell]; tabel + = ''; table + = rowCells [rowCell]; tabel + = '
'; . $ ( 'Body') append (tabel);

Het idee is dus om elk van de CSV-rijen om te zetten in een tabelrij. Met dat in gedachten, laten we in het kort uitleggen hoe de code hierboven werkt:

  • Ten eerste gebruiken we een regex om het AJAX-antwoord te splitsen en zo de CSV-rijen te scheiden.
  • Vervolgens voeren we de CSV-rijen door en splitsen ze hun gegevensvelden.
  • Ten slotte doorlopen we de gegevensvelden en maken de bijbehorende tabelcellen.

Neem bovendien de volgende visualisatie om een ​​beter begrip van deze code te krijgen:

Op dit punt is het belangrijk om duidelijk te maken waarom we de / \ R \ n |? \ R / regex om de CSV-rijen te splitsen.

Zoals u waarschijnlijk al weet, zijn er verschillende weergaven van een nieuwe regel voor verschillende besturingssystemen. Op Windows-platforms zijn bijvoorbeeld de tekens die een nieuwe regel vertegenwoordigen \ R \ n. Dat gezegd hebbende, kunnen we met behulp van de bovenstaande regex al die mogelijke representaties matchen.

Bovendien laten de meeste teksteditors ons toe om het formaat voor een nieuwe regel te kiezen. Neem bijvoorbeeld Notepad ++. In deze editor kunnen we het gewenste formaat voor een document specificeren door naar dit pad te gaan:

Ter illustratie, overweeg ons bestand. Afhankelijk van het formaat dat we kiezen, ziet het er als volgt uit:

Stijlen toevoegen aan de HTML-tabel

Voordat we naar de resulterende tabel kijken, voegen we een paar basisstijlen toe:

 tabel marge: 0 auto; text-align: center; border-collapse: collapse; rand: 1px vast # d4d4d4;  tr: nth-child (even) background: # d4d4d4;  th, td opvulling: 10px 30px;  th border-bottom: 1px solid # d4d4d4;  

Dit is de gegenereerde tabel:

Conclusie

In dit korte artikel hebben we het proces doorgenomen van het converteren van een CSV-bestand naar een HTML-tabel. Natuurlijk hadden we een web-gebaseerde tool voor deze conversie kunnen gebruiken, maar ik denk dat het altijd een grotere uitdaging is om dit te bereiken door je eigen code te schrijven.