Csv-tiedostomuoto (Comma Separated Values, pilkulla erotetut arvot) on suosittu tapa vaihtaa tietoja sovellusten välillä. Tässä pikavinkissä opimme, miten JavaScript voi auttaa meitä visualisoimaan CSV-tiedoston tietoja.
Csv-tiedoston luominen
Luotaan aluksi yksinkertainen CSV-tiedosto. Tätä varten hyödynnämme Mockaroo-ohjelmaa, joka on verkossa toimiva testidatageneraattori. Tässä on tiedostomme:
Csv-tiedoston muuntaminen HTML-taulukoksi
Nyt kun olemme luoneet tiedoston, olemme valmiita jäsentämään sen ja rakentamaan siihen liittyvän HTML-taulukon.
Ensimmäisenä askeleena käytämme jQueryn ajax-funktiota tietojen hakemiseen tästä tiedostosta:
$.ajax({ url: 'csv_data.csv', dataType: 'text', }).done(successFunction);
Jos AJAX-pyyntö onnistuu, successFunction suoritetaan. Tämä funktio vastaa palautettujen tietojen jäsentämisestä ja niiden muuntamisesta HTML-taulukoksi:
Ajatuksena on muuntaa jokainen CSV-rivi taulukkoriviksi. Tätä ajatellen selitetään lyhyesti, miten yllä oleva koodi toimii:
- Ensin käytämme regexiä AJAX-vastauksen jakamiseen ja siten CSV-rivien erottamiseen.
- Sitten käymme läpi CSV-rivit ja jaamme niiden datakentät.
- Viimeiseksi käymme silmukalla läpi datakentät ja luomme niitä vastaavat taulukkosolut.
Lisäksi, jotta saat paremman käsityksen tästä koodista, tarkastele seuraavaa visualisointia:
Tässä vaiheessa on tärkeää selventää, miksi käytimme /\r?\n|\r/-regexiä CSV-rivien jakamiseen.
Kuten luultavasti jo tiedätkin, käyttöjärjestelmissä on erilaisia uuden rivin esityksiä. Esimerkiksi Windows-alustoilla uutta riviä edustavat merkit ovat \r\n. Käyttämällä yllä olevaa regexiä pystymme kuitenkin vastaamaan kaikkiin näihin mahdollisiin esitystapoihin.
Lisäksi useimmat tekstieditorit antavat meille mahdollisuuden valita uuden rivin muodon. Otetaan esimerkiksi Notepad++. Tässä editorissa voimme määrittää asiakirjalle halutun muodon navigoimalla tähän polkuun:
Katsotaanpa havainnollistamiseksi tiedostoamme. Valitsemastamme formaatista riippuen se näyttäisi tältä:
Tyylien lisääminen HTML-taulukkoon
Ennen kuin katsomme tuloksena syntyvää taulukkoa, lisäämme siihen muutaman perustyylin:
Tässä on luotu taulukko:
Csv-tiedoston jäsentäminen Papa Parse -kirjastolla
Tässä osiossa katsomme, miten voit käyttää Papa Parse -kirjastoa CSV-tiedoston jäsentämiseen silmänräpäyksessä! Papa Parse on todella tehokas CSV-jäsennin, joka tarjoaa paljon konfigurointimahdollisuuksia, ja voit käyttää sitä myös todella suurille CSV-tiedostoille.
Papa Parse -kirjasto on saatavilla npm:ssä, ja jos et halua käyttää npm:ää, voit sen sijaan ladata virallisen Papa Parse npm-paketin unpkg:sta.
Miten se toimii
Oheinen esimerkki havainnollistaa, kuinka helppoa CSV-merkkijonon jäsentäminen on.
var results = Papa.parse(data); // data is a CSV string
Muuttujaan results on tallennettu seuraava sisältö.
Kuten näet, muuttujaan Results.data on tallennettu matriisi kaikista riveistä. Jos jäsentelyn aikana ilmenee virheitä, ne ovat Results.errors:ssä. Lopuksi voit käyttää Results.meta:tä CSV-merkkijonon metatietoja varten.
Toisaalta, jos haluat suoraan jäsentää paikallisen CSV-tiedoston, voit välittää JavaScript File -olion:
Papa.parse(fileInput.files, { complete: function(results) { console.log(results); }});
Ja voit myös välittää URL-osoitteen etä-CSV-tiedostoon:
Papa.parse(url, { download: true, complete: function(results) { console.log(results); }});
Papa Parse tarjoaa perusjäsennyksen lisäksi paljon muitakin ominaisuuksia, kuten:
- suurten tiedostojen suoratoisto (jotta voit käsitellä niitä rivi riviltä)
- käänteinen jäsennys (CSV:n lähettäminen JavaScript-objektista)
- jQuery-integraatio
- ja paljon muuta
Kannustan sinua tutustumaan tähän kirjastoon, sillä se on todella tehokas ja helppokäyttöinen!
Yhteenveto
Tässä lyhyessä artikkelissa kävimme läpi CSV-tiedoston muuntamisen HTML-taulukoksi. Olisimme tietysti voineet käyttää tähän muuntamiseen web-pohjaista työkalua, mutta mielestäni on aina haastavampaa saavuttaa tämä kirjoittamalla omaa koodia.