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.
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:
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 = '
'; table + = rowCells [rowCell]; tabel + = ' | '; else table + = ''; table + = rowCells [rowCell]; tabel + = ' | '; if (singleRow === 0) table + = '
---|
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:
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:
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:
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.