如何使用 papa-parse-angular2答案

【问题标题】：How to use papa-parse-angular2如何使用 papa-parse-angular2
【发布时间】：2017-04-28 03:32:52
【问题描述】：

想使用papa-parse-angular2 将 CSV 转换为 JSON。没有找到任何例子，所以我这样做了。

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
        }
      });

没有构建问题。但是运行它时，出现以下错误。

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)

不知道如何修复。或其他库以角度 4 将 CSV 转换为 JSON？感谢任何帮助。

【问题讨论】：

看看npmjs.com/package/ngx-papaparse

标签： json angular csv data-conversion format-conversion

【解决方案1】：

您可以使用ngx-papaparse。

首先安装库：

对于 Angular 6 (docs)：

npm install ngx-papaparse --save

还有Angular 2/4 和Angular 5 的版本。

然后将其导入您的模块（不必是您的 AppModule）：

import { PapaParseModule } from 'ngx-papaparse';

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

解析 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);
            }
        });
    }
}

您还可以解析文件，而不是字符串。只需将csvData 替换为文件即可。

免责声明：我创建了库。

【讨论】：

文件意思是 csv 文件位置/路径？
@Euridice01 文件可以是路径、文件对象或字符串。请参阅文档。他们应该覆盖它（参见下载属性）； alberthaff.dk/projects/ngx-papaparse/docs/v3/parsing-csv/… :-)
但是不覆盖项目内部的本地资源文件
它必须是浏览器可以访问的文件。如果文件位于公共目录中，只需输入它的 HTTP 路径，并设置download = true。或者，您可以添加一个文件表单输入并将该文件提供给 Papa Parse。

【解决方案2】：

您可以简单地使用papaparser。

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

使用

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

然而，一个缺点是你不会得到 papaparse 的任何类型定义

【讨论】：

【解决方案3】：

安装papaparse 和@types/papaparse。这将为 IDE 智能感知启用类型定义。

然后，你可以导入整个 papaparse 模块

import * as Papa from 'papaparse'

或将所需的导入指定为

import { parse } from 'papaparse'

建议使用这种方法而不是第三方包装器，因为它们更新不那么频繁，或者背后的社区努力有限。

【讨论】：

【解决方案4】：

如下所述导入PapaParser：

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

然后使用like：

private x1() {
 let file = ...;
  Papa.parse(file, {
  header: true,
  skipEmptyLines: true,
  complete: (results) => {
    let parsedData = results.data; 
  }
})

【讨论】：