Parsing en CSV-fil med JavaScript

Hva du skal skape

Filformatet CSV (Comma Separated Values) er en populær måte å utveksle data mellom applikasjoner.

I dette raske tipset lærer vi hvordan JavaScript kan hjelpe oss med å visualisere dataene i en CSV-fil.

Opprette en CSV-fil

Til å begynne med, la oss lage en enkel CSV-fil. For å gjøre dette, vil vi dra nytte av Mockaroo, en online testdata generator. Her er vår fil:

Konvertere en CSV-fil til en HTML-tabell

Nå som vi har generert filen, er vi klare til å analysere den og bygge et tilhørende HTML-tabell.

Som et første skritt bruker vi jQuery's ajax funksjon for å hente dataene fra denne filen:

 $ .ajax (url: 'csv_data.csv', dataType: 'text',). ferdig (suksessFunksjon); 

Forutsatt at AJAX-forespørselen er vellykket, vil successFunction er utført. Denne funksjonen er ansvarlig for å analysere de returnerte dataene og omdanne dem til et HTML-tabell:

 funksjon suksessFunksjon (data) var allRows = data.split (/ \ r? \ n | \ r /); var tabell = ''; for (var singleRow = 0; singleRow < allRows.length; singleRow++)  if (singleRow === 0)  table += ''; bord + = '';  ellers tabell + = '';  var rowCells = allRows [singleRow] .split (','); for (var rowCell = 0; rowCell < rowCells.length; rowCell++)  if (singleRow === 0)  table += '';  ellers tabell + = '';  hvis (singleRow === 0) table + = ''; bord + = ''; bord + = '';  ellers tabell + = '';  tabell + = ''; bord + = '
'; tabell + = rowCells [rowCell]; bord + = '
'; tabell + = rowCells [rowCell]; bord + = '
'; . $ ( 'Body') føye (tabell);  

Så ideen er å konvertere hver av CSV-radene til en tabellrad. Med det for øye, la oss kort forklare hvordan koden ovenfor fungerer:

• Først bruker vi en regex for å dele AJAX-responsen, og dermed adskille CSV-radene.
• Deretter gjenkjenner vi gjennom CSV-radene og deler deres datafelt.
• Til slutt løper vi gjennom datafeltene og lager de tilsvarende tabellceller.

Videre, for å få en bedre forståelse av denne koden, bør du vurdere følgende visualisering:

På dette punktet er det viktig å avklare hvorfor vi brukte / \ R \ n |? \ R / regex for å dele CSV-radene.

Som du sikkert allerede vet, er det forskjellige representasjoner av en newline på tvers av operativsystemene. For eksempel på Windows-plattformer er tegnene som representerer en ny linje \ R \ n. Når det er sagt, ved å bruke regex ovenfor, kan vi matche alle de mulige representasjonene.

I tillegg tillater de fleste tekstredaktører oss å velge formatet for en ny linje. Ta for eksempel Notepad ++. I denne redaktøren kan vi spesifisere ønsket format for et dokument ved å navigere til denne banen:

For å illustrere det, vurder vår fil. Avhengig av formatet vi velger, vil det se slik ut:

Legge til stiler i HTML-tabellen

Før vi ser på den resulterende tabellen, la oss legge til noen grunnleggende stiler for det:

 bord margin: 0 auto; tekst-align: center; border-collapse: collapse; grense: 1px solid # d4d4d4;  tr: nth-barn (jevn) bakgrunn: # d4d4d4;  th, td polstring: 10px 30px;  th border-bottom: 1px solid # d4d4d4;  

Her er det genererte bordet:

Konklusjon

I denne korte artikkelen gikk vi gjennom prosessen med å konvertere en CSV-fil til et HTML-tabell. Selvfølgelig kunne vi ha brukt et nettbasert verktøy for denne konverteringen, men jeg tror at det alltid er mer utfordrende å oppnå dette ved å skrive din egen kode.