Web Components Wednesday (WCW) blog series is created for two purposes: introducing easy-to-use components and educating people on the concept of Web Components. All the WCW blogs can be found here.
Despite being older than the first personal computer, the CSV standard still kicks butt in the current day as one of the most used data storing formats, especially among the DBMS. It is easy to use, human-readable and is supported by most platforms. However, its ubiquitous presence could not simplify parsing CSV files in browsers.
Today, we will introduce the web component, papa-parse, which can handle your CSV files in browsers like a piece of cake.
*Image credit: papaparse.com
Papa-parse can read your file from anywhere
Papa-parse is a powerful and handy CSV parser Polymer 2 web component. It is capable of manipulating your CSV files in many ways.
First off, the input. This component can read your data from anywhere, via a URL, from a raw string or even from your local storage.
Next, processing the file. For the small ones, users do not need to do anything extra, but for big data, users can make use of streaming and the worker. A worker is a thread which will not block your web activities, and streaming will make sure your screen will not freeze.
The output will be an array of rows, where each row is an array of table data, and it will be returned if the header flag is not set. Otherwise, an array of objects will be the product, where each object is a map comprising of the column name and its corresponding value for the row (e.g., {col1: value1, col2: value2}). The latter format is close to a JSON file.
...
...
It can automatically detect your delimiter
By scanning the first few rows, papa-parse will get the right delimiter of your file, with the common ones being the comma, space or quote. And not just delimiter, comments can get detected as well with the attribute comments. You provide the character for recognizing a comment, for example: # or //.
Some more cool things we want to note is the ability to convert numerical and boolean data to their type via dynamic-typing, skipping empty lines via skip-empty-lines.
Convert back from JSON to CSV using papa-unparse
Within the package, papa-unparse is capable of converting JSON arrays or objects into CSV strings. You can modify how the output will look like by configuring the quote character, the newline character, delimiter.
Many times users need to save edited files locally. The library supports CSV direct download with just a function call from the element.
Samples
Streaming big file
Read from a local file
| Mobile |
Library |
Working |
| ✔ |
Polymer^2.0.0 |
C,S,O,F,E |
Final thoughts
With more native support for web components from browser vendors, users can achieve much more tasks with less installing and more doing. As a result, web components like papa-parse will be ten times more convenient and handy.
Click here for more awesome web components