How to use papa-parse-angular2

Question

Want to use papa-parse-angular2 to convert CSV to JSON. Didn't find any example so I do it like this.

app.module.ts

import {CSVService} from 'papa-parse-angular2';
@NgModule({
providers: [
CSVService, ...

xx.component.ts

constructor( private csvService: CSVService, ...
private x1() {
    let file = ...;
    this.csvService.parse(file, {
        complete: function(results) {
          // take results.data
        }
      });

No build issue. But when run it, got following error.

Uncaught TypeError: Cannot read property 'length' of undefined
    at CSVHandler.guessHeaders (vendor.bundle.js:105749)
    at CSVHandler.formHeaders (vendor.bundle.js:105734)
    at CSVHandler.setHeaders (vendor.bundle.js:105761)
    at vendor.bundle.js:64297
    at ZoneDelegate.invoke (vendor.bundle.js:137052)
    at Object.onInvoke (vendor.bundle.js:4532)
    at ZoneDelegate.invoke (vendor.bundle.js:137051)
    at Zone.run (vendor.bundle.js:136812)
    at NgZone.run (vendor.bundle.js:4401)
    at vendor.bundle.js:64293
    at SafeSubscriber.schedulerFn [as _next] (vendor.bundle.js:4247)
    at SafeSubscriber.__tryOrUnsub (vendor.bundle.js:14620)
    at SafeSubscriber.next (vendor.bundle.js:14569)
    at Subscriber._next (vendor.bundle.js:14509)
    at Subscriber.next (vendor.bundle.js:14473)
    at EventEmitter.Subject.next (vendor.bundle.js:15308)
    at EventEmitter.emit (vendor.bundle.js:4221)

No idea on how to fix. Or other libs to convert CSV to JSON in angular 4? Appreciate any help.

Answer 1

You could use ngx-papaparse.

First install the library:

For Angular 6 (docs):

npm install ngx-papaparse --save

There is also a version for Angular 2/4 and Angular 5.

Then import it into your module (doesn't have to be your AppModule):

import { PapaParseModule } from 'ngx-papaparse';

@NgModule({
  ...
  imports: [
    ...
    PapaParseModule
  ]
})

Parsing CSV:

import { Component } from '@angular/core';
import { Papa } from 'ngx-papaparse';

@Component({
  ...
})
export class AppComponent {

    constructor(private papa: Papa) {
        let csvData = '"Hello","World!"';

        this.papa.parse(csvData,{
            complete: (result) => {
                console.log('Parsed: ', result);
            }
        });
    }
}

You can also parse a file, instead of a string. Just replace csvData with the file.

Disclaimer: I created the library.

Answer 2

You can simply use papaparser.

import * as Papa from 'papaparse/papaparse.min.js';

To use

onUpload(file: File) {
   Papa.parse(file, {
    complete: function(results) {
        console.log("Finished:", results.data);
     }
   });
}

However, one downside is you won't get any type definitions of papaparse