将CSV文件加载到数组中

Question

我正在使用Angular 6, 我是新手，尝试了8个小时以上来读取本地的csv文件，从中获取信息并将其填充到数组中。

CSV文件中的值由逗号分隔，行由换行符分隔。

请问有人可以帮我吗？我卡住了...

以下是TeacherModel.ts文件：

export class TeacherModel {
    id:number;
    name: string;
    lastName: string;
    nikName: string;
    id1: string;
    Sunday:number;
    Monday :number;
    Tuesday :number;
    Wednesday:number; 
    Thursday :number;
    Friday :number;

    Sunday1:number;
    Monday1 :number;
    Tuesday1 :number;
    Wednesday1:number; 
    Thursday1 :number;
    Friday1 :number;

}

- אסתר

---

你可以使用 Angular 的 Papa Parse 包装器（请参见 https://www.npmjs.com/package/ngx-papaparse） - uminder

@אסתר 你是在尝试读取你上传的文件还是位于资产文件夹中的文件？ - Joel Joseph

在资产文件夹中。 - אסתר

Answer 1

您可以尝试使用Papa Parser：

npm install ngx-papaparse@4 --save

示例：

const resultFile = httpClient.get('/assets/test-data.csv', {responseType: 'text'}).subscribe(file => {
      file.split(/[\r\n]+/).forEach(line => {
        this.papa.parse(line, {
          complete: (result) => {
            console.log('Parsed: ', result);
          }
        });
      });
    });

假设您的文件放置在资产目录中。我只是在控制台上打印数组，您可以随意处理。

- Kuldeep Singh

---

谢谢您的回答，我需要在哪里声明httpclient和papa，他们不认识我。 - אסתר

ngOnInit() { const resultFile = this.httpClient.get('./data/teachers.csv', {responseType: 'text'}).subscribe(file => { file.split(/[\r\n]+/).forEach((line , i) => {i++; this.papa.parse(line, { complete: (result) => { this.teachersList[i].id=result[i]; this.teachersList[i].id1=result[i]; this.teachersList[i].name=result[i]; this.teachersList[i].lastName=result[i];*********** 为什么它不工作... :( - אסתר

你需要将它注入到构造函数中，例如：constructor(private papa: Papa, httpClient: HttpClient) { const resultFile = httpClient.get('/assets/test-data.csv', {responseType: 'text'}).subscribe(file => { file.split(/[\r\n]+/).forEach(line => { this.papa.parse(line, { complete: (result) => { console.log('Parsed: ', result); } }); }); }); } - Kuldeep Singh

请确保在您的app.module.ts文件中导入了HttpClientModule。 - Kuldeep Singh

我按照你写的做了，但是不起作用:(它找不到路径“Http failure response for http://localhost:4200/data/teachers.json: 404 Not Found”。 - אסתר

Answer 2

使用以下方法，将您的CSV文件放置在资产文件夹中

import { HttpClient } from "@angular/common/http";

export class AppComponent  {
  public userArray: User[] = [];
  constructor(private http: HttpClient){
    this.http.get('assets/csv.csv', {responseType: 'text'})
    .subscribe(
        data => {
            let csvToRowArray = data.split("\n");
            for (let index = 1; index < csvToRowArray.length; index++) {
              let row = csvToRowArray[index].split(",");
              this.userArray.push(new User( parseInt( row[0], 10), row[1], row[2].trim()));
            }
            console.log(this.userArray);
        },
        error => {
            console.log(error);
        }
    );
  }
}

export class User{
  id: number;
  name: String;
  lastName: String;

  constructor(id: number, name: String, lastName: String){
    this.id = id;
    this.name = name;
    this.lastName = lastName;
  }
}

Stackblitz示例

- dasunse

Answer 3

PapaParse是JavaScript中很好的CSV解析器，它可以帮助您从本地或远程路径读取CSV文件，但是您需要将其构建到您的类中，并且您还需要另一个包，例如https://www.npmjs.com/package/class-transformer，除非您想编写自己的个人实现来将JSON响应转换为模态类。

现在，问题是您的CSV有多大，您是否真的想使用上述提到的库，如果您只想将本地CSV从HTTPGET转换为类，那么单独使用class-transformer就足够了，但是如果您想对大型重型CSV文件进行多个操作，则同时使用PapaParse也是不错的选择，请参考https://www.papaparse.com/docs#config以获取PapaParse提供的所有选项。

请查看下面我个人实现的PapaParse和CSV转换器两个库。

 import * as jsonParse from 'papaparse';
 import { plainToClass } from 'class-transformer';

 fetchDataFromCSV() {
     return this.httpClient.get(this.csvPath, { responseType: 'text' })
     .toPromise()
     .then(res => this.getPersons(res));
  }

 getPersons(res): Person[] {

     const csvData = res;
     const parsedData = jsonParse.parse(csvData, this.parseConfig).data;

      // parseConfig is papa parse option object, refer https://www.papaparse.com/docs#config for all posible parsing options.

     this.headerRow = parsedData[0]; // if you want to do something with header row
     const allPersons = plainToClass(Person, parsedData as Object[]);
     return allPersons;
 }

- Maulik

---

这对我很有帮助。 - codajoao