Papa Parse - Powerful CSV Parser for JavaScript

<!DOCTYPE html> <html> <head> <title>Papa Parse - Powerful CSV Parser for JavaScript</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, maximum-scale=1.0"> <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Arvo|Source+Sans+Pro:400,400italic,700|Lato:300,400"> <link rel="stylesheet" href="/resources/css/unsemantic.css"> <link rel="stylesheet" href="/resources/css/tomorrow.highlight.css"> <link rel="stylesheet" href="/resources/css/common.css"> <link rel="stylesheet" href="/resources/css/home.css"> <script src="/resources/js/jquery.min.js"></script> <script src="/resources/js/skrollr.min.js"></script> <script src="/resources/js/highlight.min.js"></script> <script src="/resources/js/lovers.js"></script> <script src="/resources/js/common.js"></script> <script src="/resources/js/home.js"></script> </head> <body> <div id="skrollr-body"> <div id="top" data-top="bottom: 0px; opacity: 1;" data-top-bottom="bottom: -350px; opacity: .3;"> <div class="grid-container"> <div class="grid-100"> <div id="title-main"> <h1>Papa Parse</h1> <h2>The powerful, in-browser CSV parser for big boys and girls</h2> <a href="https://github.com/mholt/PapaParse/archive/5.0.2.zip" class="button"> <i class="fa fa-download"></i>  Download </a> <a href="/demo" class="button red"> <i class="fa fa-magic"></i>  Demo </a> <a href="/docs" class="button gray"> <i class="fa fa-book"></i>  Documentation </a> </div> <div id="title-code"> <pre><code class="language-javascript">// Parse CSV string var data = Papa.parse(csv); // Convert back to CSV var csv = Papa.unparse(data); // Parse local CSV file Papa.parse(file, { complete: function(results) { console.log("Finished:", results.data); } }); // Stream big file in worker thread Papa.parse(bigFile, { worker: true, step: function(results) { console.log("Row:", results.data); } });</code></pre> </div> </div> </div> </div> <main> <header> <div class="grid-container"> <div class="grid-40 mobile-grid-50"> <div class="links"> <a href="/demo"> <i class="fa fa-magic fa-lg"></i> Demo </a> <a href="/docs"> <i class="fa fa-book fa-lg"></i> Docs </a> <a href="/faq"> <i class="fa fa-question fa-lg"></i> FAQ </a> </div> </div> <div class="grid-20 hide-on-mobile text-center"> <a href="/" class="text-logo">Papa Parse 5</a> </div> <div class="grid-40 mobile-grid-50 text-right"> <div class="links"> <a href="https://github.com/mholt/PapaParse"> <i class="fa fa-github fa-lg"></i> GitHub </a> <a href="http://stackoverflow.com/questions/tagged/papaparse"> <i class="fa fa-stack-overflow fa-lg"></i> Help </a> </div> </div> </div> </header> <div class="insignia"> <div class="firefox-hack"><div id="version-intro">Version</div><div id="version">5.0</div></div> </div> <section style="padding-top: 0;"> <div class="grid-container"> <div class="grid-100"> <h3>Features</h3> </div> </div> <div id="ticker"> <div class="ticker-item current"> <p>Now the <a href="http://jsperf.com/javascript-csv-parsers/4">fastest</a> JavaScript CSV parser for the browser</p> </div> <div class="ticker-item"> <p>The world's first multi-threaded CSV parser for the browser</p> </div> <div class="ticker-item"> <p>Papa can handle files gigabytes in size without crashing</p> </div> <div class="ticker-item"> <p>Use Papa when performance, privacy, and correctness matter to you</p> </div> <div class="ticker-item"> <p>Papa alleviates privacy concerns related to uploading files</p> </div> <div class="ticker-item"> <p>Malformed CSV is handled gracefully with a detailed error report</p> </div> </div> <div class="grid-container"> <div class="grid-33"> <li>CSV→JSON and <a href="#unparse">JSON→CSV</a></li> <li>Auto-detect <a href="#delimiter">delimiter</a></li> <li><a href="#local-files">Open local files</a></li> <li><a href="#remote-files">Download remote files</a></li> </div> <div class="grid-33"> <li><a href="#stream">Stream</a> local and remote files</li> <li><a href="#worker">Multi-threaded</a></li> <li><a href="#header">Header row</a> support</li> <li><a href="#type-conversion">Type conversion</a></li> </div> <div class="grid-33"> <li>Skip <a href="#comments">commented lines</a></li> <li>Fast mode</li> <li>Graceful <a href="#errors">error</a> handling</li> <li>Optional <a href="#jquery">sprinkle</a> of jQuery</li> </div> <div class="clear"></div> <br> <br> <div class="grid-100 text-center"> <a href="https://github.com/mholt/PapaParse" class="button"> <i class="fa fa-github"></i>  GitHub </a> <a href="/docs" class="button gray"> <i class="fa fa-book"></i>  Documentation </a> </div> </div> </section> <section> <div class="grid-container"> <div class="grid-100 text-center"> <h3>People <i class="fa fa-heart"></i> Papa</h3> </div> <div class="grid-100 text-center"> <br> <p> <a href="https://www.npmjs.com/package/papaparse"> <img src="https://img.shields.io/npm/dm/papaparse.svg" alt="PapaParse" /> </a>   <a href="https://www.npmjs.com/package/react-papaparse"> <img src="https://img.shields.io/npm/dt/papaparse.svg?label=total%20downloads" alt="PapaParse" /> </a> </p> </div> <div class="grid-33"> <p class="lover"> <a href="https://smartystreets.com">SmartyStreets</a> verifies addresses, many of which are in CSV files. Papa Parse can process huge files in the browser. <i>"We rapidly built an awesome client-side file processor with Papa Parse."</i> </p> </div> <div class="grid-33"> <p class="lover"> <a href="http://jannah.github.io/MetaReader/">MetaReader</a> helps you see your data from a meta level before you start detailed analysis. <i>"Papa Parse made it very easy to load and ready user CSV files in the browser on the client side."</i> </p> </div> <div class="grid-33"> <p class="lover"> <a href="http://jannah.github.io/MetaReader/">EpiML</a> is an agent-based mathematical model for the web, still in its early stages of development. <i>"Papa makes it so easy to use CSV, which is good for scientists."</i> </p> </div> <div class="clear"></div> <div class="grid-100 text-center"> <br> <b><a href="https://github.com/mholt/PapaParse/blob/master/docs/resources/js/lovers.js" class="add-lover-link subheader"><i class="fa fa-plus-square"></i> Add your link (it's free)</a></b> </div> </div> </section> <section id="parse"> <div class="grid-container narrow-grid"> <div class="grid-100"> <h4>CSV Parsing</h4> <h5>"Isn't parsing CSV just <code>String.split(',')</code>?"</h5> <p>Heavens, no. Papa does it right. Just pass in the CSV string with an optional <a href="/docs#config">configuration</a>.</p> <pre><code class="language-javascript">var results = Papa.parse(csvString, <a href="/docs#config">config</a>); /* results = { data: [ ... ], // parsed data errors: [ ... ], // errors encountered meta: { ... } // extra parse info } */</code></pre> </div> </div> </section> <section id="delimiter"> <div class="grid-container narrow-grid"> <div class="grid-100"> <h4>Delimiter Detection</h4> <h5>"But I don't know the delimiter..."</h5> <p>That's okay. Papa will scan the first few rows to find the right delimiter.</p> <pre><code class="language-javascript">var results = Papa.parse(csvString); console.log(results.meta.delimiter); // "\t"</code></pre> </div> </div> </section> <section id="local-files"> <div class="grid-container narrow-grid"> <div class="grid-100"> <h4>Local Files</h4> <h5>"Great, but I have a <i>file</i> to parse."</h5> <p>Then give Papa a <a href="https://developer.mozilla.org/en-US/docs/Web/API/File">File</a> instead of a string. Since file parsing is asynchronous, don't forget a callback.</p> <pre><code class="language-javascript">Papa.parse(fileInput.files[0], { complete: function(results) { console.log(results); } });</code></pre> </div> </div> </section> <section id="remote-files"> <div class="grid-container narrow-grid"> <div class="grid-100"> <h4>Remote Files</h4> <h5>"No—I mean, the file isn't on my computer."</h5> <p>Oh, well then just pass in the URL and—of course—a callback.</p> <pre><code class="language-javascript">Papa.parse("http://example.com/file.csv", { download: true, complete: function(results) { console.log(results); } });</code></pre> </div> </div> </section> <section id="stream"> <div class="grid-container narrow-grid"> <div class="grid-100"> <h4>Streaming</h4> <h5>"Did I mention the file is huge?"</h5> <p>That's what streaming is for. Specify a step callback to receive the results row-by-row. This way, you won't load the whole file into memory and crash the browser.</p> <pre><code class="language-javascript">Papa.parse("http://example.com/big.csv", { download: true, step: function(row) { console.log("Row:", row.data); }, complete: function() { console.log("All done!"); } });</code></pre> </div> </div> </section> <section id="worker"> <div class="grid-container narrow-grid"> <div class="grid-100"> <h4>Multi-Threading</h4> <h5>"Lovely. Now my web page locked up."</h5> <p>That happens when a long-running script is executing in the same thread as the page. Use a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Worker</a> thread by specifying <code>worker: true</code>. It may take slightly longer, but your page will stay reactive.</p> <pre><code class="language-javascript">Papa.parse(bigFile, { worker: true, step: function(row) { console.log("Row:", row.data); }, complete: function() { console.log("All done!"); } });</code></pre> </div> </div> </section> <section id="header"> <div class="grid-container narrow-grid"> <div class="grid-100"> <h4>Header Row</h4> <h5>"Great! Now I want data keyed by field name."</h5> <p>If you tell Papa there is a header row, each row will be organized by field name instead of index.</p> <pre><code class="language-javascript">// Key data by field name instead of index/position var results = Papa.parse(csv, { header: true });</code></pre> </div> </div> </section> <section id="type-conversion"> <div class="grid-container narrow-grid"> <div class="grid-100"> <h4>Type Conversion</h4> <h5>"Hey, these numbers are parsed as strings."</h5> <p><i>Everything</i> is parsed as strings. If you want numbers and booleans, you can enable dynamic typing to do the conversion for you.</p> <pre><code class="language-javascript">// Converts numeric/boolean data var results = Papa.parse(csv, { dynamicTyping: true });</code></pre> </div> </div> </section> <section id="comments"> <div class="grid-container narrow-grid"> <div class="grid-100"> <h4>Comments</h4> <h5>"I forgot to mention: my CSV files have comments in them."</h5> <p>Okay, first off: that's really weird. But fortunately, you can skip those lines... just specify the comment string.</p> <pre><code class="language-javascript">// Mostly found in academia, some CSV files // may have commented lines in them var results = Papa.parse(csv, { comments: "#" });</code></pre> </div> </div> </section> <section id="errors"> <div class="grid-container narrow-grid"> <div class="grid-100"> <h4>Error Handling</h4> <h5>"Aw, shoot. Errors."</h5> <p>Papa handles errors pretty well. The <a href="http://tools.ietf.org/html/rfc4180">CSV standard</a> is somewhat <strike>loose</strike> ambiguous, so Papa is designed for edge cases. For example, mismatched fields won't break parsing.</p> <pre><code class="language-javascript">// Example error: { type: "FieldMismatch", code: "TooManyFields", message: "Expected 3 fields, but parsed 4", row: 1 }</code></pre> </div> </div> </section> <section id="jquery"> <div class="grid-container narrow-grid"> <div class="grid-100"> <h4>jQuery Plugin</h4> <h5>"Can I use Papa with jQuery?"</h5> <p>Sure, but it's not required. You can use jQuery to select file input elements and then parse their files. Papa exposes its file parsing API as a jQuery plugin only when jQuery is defined. Papa Parse has <b>no dependencies</b>.</p> <pre><code class="language-javascript">$("input[type=file]").parse({ config: { complete: function(results, file) { console.log("This file done:", file, results); } }, complete: function() { console.log("All files done!"); } });</code></pre> </div> </div> </section> <section id="unparse"> <div class="grid-container narrow-grid"> <div class="grid-100"> <h4>JSON to CSV</h4> <h5>"Last thing: what about converting JSON to CSV?"</h5> <p>Call <code>unparse()</code> instead of <code>parse()</code>, passing in your array of arrays or array of objects. Papa will figure it out.</p> <pre><code class="language-javascript">// Output is a properly-formatted CSV string. // See <a href="/docs#json-to-csv">the docs</a> for more configurability. var csv = Papa.unparse(yourData);</code></pre> </div> </div> </section> <section id="download"> <div class="grid-container"> <div class="grid-100"> <h3>Who's Your Papa?</h3> </div> <div class="grid-45 suffix-5 mini-papa"> <p> <b><a href="https://github.com/mholt/PapaParse/blob/master/papaparse.min.js">Lil' Papa</a></b> (minified) for production use </p> </div> <div class="grid-45 prefix-5"> <p> <b><a href="https://github.com/mholt/PapaParse/blob/master/papaparse.js">Fat Papa</a></b> (un-minified) for development </p> </div> <div class="clear"></div> <div class="prefix-30 grid-40 suffix-30"> <b style="display: block; text-align: center;">npm</b> <pre><code class="language-bash">$ npm install papaparse</code></pre> <br> <b style="display: block; text-align: center;">bower</b> <pre><code class="language-bash">$ bower install papaparse</code></pre> </div> <div class="clear"></div> <div class="grid-100 text-center"> <br><br> <a href="https://github.com/mholt/PapaParse" class="button"> <i class="fa fa-github"></i>  GitHub </a> <a href="/demo" class="button red"> <i class="fa fa-magic"></i>  Demo </a> <a href="/docs" class="button gray"> <i class="fa fa-book"></i>  Documentation </a> </div> </div> </section> </main> <footer>  <div class="footer-main"> <div class="grid-container"> <div class="grid-40 text-center"> <div class="logo">P</div> <br><br> Papa Parse by <a href="https://twitter.com/mholt6">Matt Holt</a> <br> © 2013-2019 </div> <div class="grid-15 mobile-grid-50 links"> <h5>Learn</h5> <a href="/demo">Demo</a> <a href="/docs">Documentation</a> <a href="/faq">FAQ</a> </div> <div class="grid-15 mobile-grid-50 links"> <h5>Project</h5> <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=S6VTL9FQ6L8EN&item_name=PapaParse&currency_code=EUR&source=url">Donate</a> <a href="https://github.com/mholt/PapaParse">GitHub</a> <a href="https://twitter.com/search?q=%23PapaParse">Share</a> </div> <div class="clear hide-on-desktop"></div> <div class="grid-15 mobile-grid-50 links"> <h5>Download</h5> <a href="https://github.com/mholt/PapaParse/archive/master.zip">Latest (master)</a> <hr> <a href="https://unpkg.com/papaparse@latest/papaparse.min.js">Lil' Papa</a> <a href="https://unpkg.com/papaparse@latest/papaparse.js">Fat Papa</a> </div> <div class="grid-15 mobile-grid-50 links"> <h5>Community</h5> <a href="https://twitter.com/search?q=%23PapaParse">Twitter</a> <a href="http://stackoverflow.com/questions/tagged/papaparse">Stack Overflow</a> </div> </div> </div> </footer> </div> </body> </html>

CINXE.COM

Papa Parse - Powerful CSV Parser for JavaScript